javascript - 限制数据表的第一个表行

Question

您好，我目前正在处理数据表，我编写了一个代码，当单击表行时，将调用一个特定的函数。

问题是，当我单击表头的表行时，它也会执行该功能(一定不能)。

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

    $('#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 下的功能，但我不希望它禁用，因为我想使用对单元格进行排序的内置数据表功能。

谢谢

Answer 1

我将您的问题解释如下:当我单击表行时，当且仅当该行具有 <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>