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>单元格的行中的单元格。这永远不应该是你想要的，但它说明了实际被选中的内容。

＆＃13;

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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

限制数据表的第一个表行

1 个答案: