Question

我有一个要求，我需要在html表中点击第一列的html表中获取第二个td的值。我正在使用jquery来实现这一点。

$('.tbody').on('click','tr td:nth-child(1)', function () {
    var id = $(this).closest("td").find('td:eq(1)').text();
    alert(id)
});

我正在使用onclick函数来获取第二个td的值，如上面的代码所示。但我得到一个空警报。我不知道我哪里出错了请帮忙。根据我的理解 $（this）.closest（＆＃34; td＆＃34;）。find（＆＃39; td：eq（1）＆＃39;）。text（）应该搜索下一个td和.text（）方法应该显示td isn＆＃39; tit中的值？

以下代码段将反映上述问题

请帮忙！

提前致谢！

＆＃13;

$(function () {
    $('.tbody').on('click','tr td:nth-child(1)', function () {
        var id = $(this).closest("td").find('td:eq(1)').text();
        alert(id)
    });
});

＆＃13;

#items {
    border-collapse: collapse;
    width: 100%;
}
#items th {
    background-color: #009999;
    color: white;
    border : 1px solid;  
}
#items td{
    border : 1px solid;
}
#items tbody{
    height:200px;
    overflow-y:auto;
}
#items thead,.tbody{
    display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">    
    <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; "  id="items">
	<thead>
            <tr>
	        <th style="width:100px;">Fee Type</th>
		<th style="width:100px;">Charges per Qty</th>
		<th style="width:100px;">Qty</th>
	    </tr>
	</thead>
	<tbody class="tbody">
	<tr>
            <td style="width:100px;">a</td>
            <td style="width:100px;">b</td>
            <td style="width:100px;">c</td>
        </tr>
        <tr>
            <td style="width:100px;">d</td>
            <td style="width:100px;">e</td>
            <td style="width:100px;">f</td>
        </tr>
	</tbody>
    </table>
</div>

＆＃13;

Answer 1

您的逻辑问题是this已经引用了td，因此closest('td')无法获得您需要的元素。它也不是您要定位的td的父级，因此find()将无效。您需要使用closest('tr')代替：

var id = $(this).closest("tr").find('td:eq(1)').text()

然而，实现这一目标的最简单方法是使用next()，因为td元素是兄弟姐妹：

$(function() {
  $('.tbody').on('click', 'tr td:nth-child(1)', function() {
    var id = $(this).next().text();
    console.log(id);
  });
});

#items {
  border-collapse: collapse;
  width: 100%;
}

#items th {
  background-color: #009999;
  color: white;
  border: 1px solid;
}

#items td {
  border: 1px solid;
}

#items tbody {
  height: 200px;
  overflow-y: auto;
}

#items thead,
.tbody {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-striped table-bordered table-hover table-condensed" style="width: 300px; " id="items">
    <thead>
      <tr>
        <th style="width:100px;">Fee Type</th>
        <th style="width:100px;">Charges per Qty</th>
        <th style="width:100px;">Qty</th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr>
        <td style="width:100px;">a</td>
        <td style="width:100px;">b</td>
        <td style="width:100px;">c</td>
      </tr>
      <tr>
        <td style="width:100px;">d</td>
        <td style="width:100px;">e</td>
        <td style="width:100px;">f</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

只需将最接近的元素（td更改为tr）即可获得预期结果

var id = $(this).closest("tr").find('td:eq(0)').text();

如何使用jquery点击第一个td获取html表中第二个td的值

2 个答案: