Question

当单击表格的单元格时，我想设置此单元格的内容，但前提是它既不在第一行也不在第一列中。

$('td').click(function() {

  console.log($(this).parents('tr'));
  console.log($('#matrix').find('tr:first'));
  console.log($('#matrix').find('tr:first') == $(this).parents('tr'));

  if ($(this).parents('tr') != $('#matrix').find('tr:first')) {

    console.log("is ok");
    if ($(this).text() != "x") { // Connect
      $(this).text("x");
      alert("Connecting " +
        $('td:first', $(this).parents('tr')).text() +
        " with " +
        $('tr:first', $(this).parents('td')).text());
    } else { //Disconnect
      $(this).text("");
      alert("Disconnecting Endpoint " +
        $('td:first', $(this).parents('tr')).text() +
        " with Endpoint " +
        $('tr:first', $(this).parents('td')).text());
    };

  }; // row/columns > 0 only
}); // click()

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>

</table>

Firefox debuging控制台突出显示完全相同的元素，但

console.log( $(this).parents('tr') == $('#matrix').find('tr:first') );

无论我点击哪个单元格，

始终显示为false。

我做错了什么？

Answer 1

可能有两个指向相同的dom元素，但对象引用会有所不同。用于检查jQuery中的等于使用is()方法。

console.log( $(this).parents('tr').is($('#matrix').find('tr:first')));

<小时/> 或者通过使用索引或get()方法比较DOM对象。

console.log( $(this).parents('tr')[0] == $('#matrix').find('tr:first')[0]);
// or
console.log( $(this).parents('tr').get(0) == $('#matrix').find('tr:first').get(0));

更新：此外，您可以通过仅针对需要更新内容的td元素绑定点击事件来减少代码。使用:nth-child伪类选择器（纯CSS选择器）来过滤td。

$('#matrix tr:nth-child(n + 2) td:nth-child(n + 2)').click(function() {
  //  use text method with callback to update text based on the existing content
  $(this).text(function(i, txt) {
    return txt === 'x' ? '' : 'x';
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

您无需比较对象，只需使用:gt()和:not()以及:first-child选择器即可排除第一行和第一列。

$('#matrix tr:gt(0) td:not(:first-child)').click(function() {
  if ($(this).text() != "x") {
    $(this).text("x");
  } else {
    $(this).text("");
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="matrix" border="0">
  <tr>
    <td>Matrix</td>
    <td>_name_</td>
    <td>_name_</td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>_name_</td>
    <td></td>
    <td></td>
  </tr>

</table>

Answer 3

排除第一行并在选择器中轻松完成：

$('tr:not(:first) > :not(:first-child)').click(function() {
    //Code
});

父节点（'tr）和find（'tr：first'）的JQuery比较不起作用

3 个答案: