Question

假设我有代码。

<tbody>
  <tr id="a1">
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr id="a3">
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>

如果我想获取我单击的行的id值。

<script>
$('tr').click(function(){
  var a = //something values
  alert(a);
});
</script>

我应该在里面放些什么？

对于另一个问题（这是上面问题的原始问题），当我有下面的代码时

<tbody>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr>
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>

如果我想要该行的第二个td值，请单击我应该使用哪个脚本代码？

Answer 1

您可以使用 this 对象，从中可以获取 id 属性：

$('tr').click(function(){
  var a = this.id
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

要获取第二个 td ，可以使用find()和eq()

$('tr').click(function(){
  var secondTD = $(this).find('td').eq(1).text();
  alert(secondTD);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

Answer 2

第一个问题。您可以这样使用

<script>
    $('tr').click(function(){
        alert($(this).attr('id');
    });
</script>

第二个问题

您可以使用

$('tr').click(function(){
    alert($(this).find("td:nth-child(2)").html());
})

Answer 3

确保代码在文档加载后运行。第二个td值也在此代码段中：

$(document).ready(function(){

$('tr').click(function(){
  var id = $(this).attr('id');
  var secondTdValue = $(this).find('td').eq(1).text();
});

});

Answer 4

回答您的第一个问题。您可以使用this.id来获取您单击的行的id。

$('tr').click(function() {
  var a = this.id;
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="a1">
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr id="a3">
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

但是，您的第二个问题不需要这样做。为此，您可以使用：

this.children[1].textContent;

这里this是指您单击的tr，而.children是td元素的集合。因此，定位此数组的索引1将为您提供该行中的第二个td。

请参见下面的工作示例：

$('tr').click(function() {
  var a = this.children[1].textContent;
  alert(a);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tr>
      <td>4d</td>
      <td>a23</td>
    </tr>
  </tbody>
</table>

点击HTML表格行时，如何指定每一行？

4 个答案: