如何在使用 jquery 单击第一个 td 时获取 html 表中第二个 td 的值答案

【问题标题】：How to get the value of 2nd td in html table on click of first td using jquery如何在使用 jquery 单击第一个 td 时获取 html 表中第二个 td 的值
【发布时间】：2017-12-05 17:22:54
【问题描述】：

我有一个要求，我需要在单击 html 表中的第一列时获取 html 表中的 2nd 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("td").find('td:eq(1)').text() 应该搜索下一个 td 和 .text() 方法应该显示 td 内的值不是吗？

下面的sn-p会反映上面提到的问题

请帮忙！

提前致谢！

$(function () {
    $('.tbody').on('click','tr td:nth-child(1)', function () {
        var id = $(this).closest("td").find('td:eq(1)').text();
        alert(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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

只要改变最近的元素（td 到 tr），你就会得到预期的结果

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

【讨论】：