限制数据表的第一行

Restrict 1st table row for datatables

本文关键字：一行数据表更新时间：2023-09-26

嗨，我目前正在研究数据表，我写了一个代码，当一个表行已经点击有一个特定的函数，将被调用。

问题是当我单击表标题的表行时，它也会执行该功能(它绝对不能)。

这是我的代码片段，当我单击表行，将有一个函数调用。

    $('#response-contact-container').on('click', 'tr', function(){
    var table = $('#response-contact-container').DataTable();
    var data = table.row(this).data();
    $('#edit-contact-settings').modal('hide');
    $('.modal-backdrop').remove();
    var community_contacts = ['c_id','firstname','lastname','prefix','office','sitename','number','rel'];
    var employee_contacts = ['eid','firstname','lastname','nickname','birthday','email','numbers','grouptags'];
    var counter = 1;
    var container = document.getElementById("contact-settings-wrapper");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for(var i=1; i< data.length; i++) {
        var label = document.createElement("label");
        var input = document.createElement("input");
        if (data[0].charAt(0)=="c") {
            var t = document.createTextNode(community_contacts[i].capitalize());
            label.appendChild(t);
            container.appendChild(label);
            input.type = "text";
            input.name = community_contacts[i];
            input.className = "form-control";
            input.value = data[i];
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        } else {
            var t = document.createTextNode(employee_contacts[i].capitalize());
            label.appendChild(t);
            container.appendChild(label);
            input.type = "text";
            input.name = community_contacts[i];
            input.className = "form-control";
            input.value = data[i];
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        }
        console.log(data[i]);
        counter++;
    }
    $('#edit-contact').modal('show');
});

我希望标题能够不执行jQuery中的onclick下的功能，但我不希望它被禁用，因为我想使用内置的数据表对单元格进行排序。

谢谢

我将您的问题解释为以下内容:当我单击表行时，如果且仅当该行具有<td>元素，而不是<th>元素，即仅当它是非标题行时，我可以调用单击处理程序吗?

要实现这一点，使用jQuery .has()选择器。具体来说，在您的代码中，而不是

...on('click', 'tr', ...

使用

...on('click', 'tr:has(td)', ...

在下面的示例中，所选元素的currentTarget结果显示，它确实是行，而不是单元格，这是单击的当前目标。此外，它调用(或不调用)处理程序函数如下:

当你点击一个正常的数据行，即一行所有的<td>单元格
不是当你点击一个正常的标题行，即一行与所有的<th>单元格
当您点击包含<th>和<td>行(不适当)的格式错误的行

永远不要用最后一种方式组成表行。然而，这个例子展示了选择器是如何工作的。特别是，即使单击该行中的<th>单元格，单击处理程序仍将触发，因为单击的是至少包含一个<td>单元格的行中的单元格。这绝不应该是你想要的，但它说明了实际被选择的内容是什么。

var counter = 0;
$('#myTable').on('click', 'tr:has(td)', function(e) {
  console.log(e.currentTarget);
});
$('#myTable').on('click', 'tr', function(e) {
  counter += 1;
  console.log(counter + ' clicks');
});

table {
    border-collapse: collapse;
}
td, th {
  border: black solid 1px;
  padding: 0.5em;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <th>normal header row - cell #1 - &lt;th&gt;</th>
    <th>normal header row - cell #2 - &lt;th&gt;</th>
  </tr>
  <tr>
    <th>malformed (mixed) row - cell #1 - &lt;th&gt;</th>
    <td>malformed (mixed) row - cell #2 - &lt;td&gt;</td>
  </tr>
  <tr>
    <td>normal data row - cell #1 - &lt;td&gt;</td>
    <td>normal data row - cell #2 - &lt;td&gt;</td>
  </tr>
</table>