Question

我的要求是访问被点击行的单元格中的信息。典型的行如下所示：

<tr>
  <td>2015-01-01</td>
  <td>First Name</td>
  <td>Last Name</td>
  <td>2.3</td>
  <td><a href=#><img src="edit.png" class="edit"></a></td>  
</tr>

所以你看到我需要在点击图像时访问每个单元格的内容。

这是我尝试过但却没有成功的事情：

$(document).on("click", ".edit", function(e) {
        e.preventDefault();
        var row = $(this).parent().parent().parent();
        var cells = row.children();

        console.log($(':nth-child(1)', cells).val());
    });

这给了我空白输出。

令我沮丧的是，我可以看到cells是一个数组，而cells[0]包含<td>2015-01-01</td>但我如何提取它？之前我尝试cells[0].val()，但收到的错误是undefined is not a function。我甚至试过了console.log($(':nth-child(1)', row).val());，但它给了我空白数据。

有人请帮忙！

Answer 1

td个元素没有价值。您需要使用。.html()或.text()代替.val()

console.log($(cells).first().text());

您还可以将代码缩小到：

$(document).on("click", ".edit", function(e) {
    e.preventDefault();
    console.log($(this).closest('tr').find('td:first').text());
});

Answer 2

问题在于使用children，然后使用:nth-child

console.log($(':nth-child(1)', row).text());

当您说$(':nth-child(1)', cells)（此处cells已经是td个元素）时，您正试图找到td元素的第一个不存在的子元素前4个元素，因此它将返回您调用a的最后td元素.val()元素，这在您的情况下无效，因为它仅适用于输入字段，所以请使用.text()或.html()

也可以使用.closest()代替链接.parent()

var row = $(this).closest('tr');

演示：

$(document).on("click", ".edit", function(e) {
  e.preventDefault();
  var row = $(this).closest('tr');

  console.log($(':nth-child(1)', row).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>2015-01-01</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td>2.3</td>
    <td>
      <a href=#>
        <img src="//placehold.it/32X16&text=edit" class="edit" />
      </a>
    </td>
  </tr>
</table>

单击a时访问行的单元格

2 个答案: