Question

我正在为表编写代码，每行有2个TD。

我能够使用eq（）返回具有类“ nameText”的第一个TD值，但是为什么没有返回具有类“ codeText”的第二个TD的值？

这是代码：

HTML：

<tbody id="expTableValues">
<tr class="no-border">
<td class="nameText"><input type="checkbox" class="checkBoxItem">Director</td>
<td class="text-center codeText">Balkar</td>
<td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
</tr>

jQuery：

var nameText = $(this).closest('td').eq(0).text();
var codeText = $(this).closest('td').eq(1).text();

alert(nameText);
alert(codeText);

Answer 1

因为在遍历树之前必须指向最接近的公共父级 .closest('tr') ：

var codeText = $(this).closest('td').eq(1).text();

$(".checkBoxItem").on("change", function() {
  var $tr = $(this).closest('tr');
  var nameText = $tr.find('td').eq(0).text();
  var codeText = $tr.find('td').eq(1).text();
  console.log(nameText);
  console.log(codeText);
});

<table>
  <tbody id="expTableValues">
    <tr class="no-border">
      <td class="nameText"><label><input type="checkbox" class="checkBoxItem">Director</label></td>
      <td class="text-center codeText">Balkar</td>
      <td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
    </tr>
  </tbody>
</table>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

此外，由于您已经使用了类 nameText和codeText，因此最好参考它们：

var codeText = $(this).closest('td').eq(1).text();

$(".checkBoxItem").on("change", function() {
  var $tr = $(this).closest('tr')
  var nameText = $tr.find('.nameText').text();
  var codeText = $tr.find('.codeText').text();
  console.log(nameText);
  console.log(codeText);
});

<table>
  <tbody id="expTableValues">
    <tr class="no-border">
      <td class="nameText"><label><input type="checkbox" class="checkBoxItem">Director</label></td>
      <td class="text-center codeText">Balkar</td>
      <td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
    </tr>
  </tbody>
</table>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

您的eq位置无效，您使用2作为选择器，但其中没有任何文本。

 $(this).closest('tr').find('td:eq(0)').text();

这将找到最接近的tr并找到带有索引的td，请记住它以0开头。这里的结账演示我已经在单击edit时实现了，您可以根据需要实现它。

$(".editCenter").click(function() {    
  var nameText = $(this).closest('tr').find('td:eq(0)').text();
  var codeText = $(this).closest('tr').find('td:eq(1)').text();

  alert(nameText);
  alert(codeText);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="expTableValues">
  <tr class="no-border">
    <td class="nameText"><input type="checkbox" class="checkBoxItem">Director</td>
    <td class="text-center codeText">Balkar</td>
    <td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete">delete</i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit">edit</i></a></td>
  </tr>
  </tbody>
  </table>

是否没有为“ eq（）”返回值？

2 个答案: