如何获取 <td> 内的跨度值（表数据），当单击也在 <td> 内的按钮时

Question

当点击同样在同一行中的按钮时，我无法理解如何获取表格 span id 值以及 span 文本

我的html代码是

<div>
<table id="t1" style="border:1px solid">       
    <tr><td><span id="city">Chikago</span></td><td><span>USA</span></td><td><button class="show">Show me</button></td></tr>
    <tr><td><span id="city">London</span></td><td><span>UK</span></td><td><button class="show">Show me</button></td></tr>
    <tr><td><span id="city">Delhi</span></td><td><span>INDIA</span></td><td><button class="show">Show me</button></td></tr>

</table>

使用 jquery，我试图在单击第 2 行的按钮时获取 2bd 行、第 2 列的值，但我不明白如何选择 tanle roes、列数据。

这就是为什么我不能写 jquery 代码。

请给出一个正确的 jquery 代码来解决这个问题。

Answer 1

您需要将每个 id 作为唯一值 - 所有这些 span 都具有相同的 id 并且会导致问题 - 我建议使用 data-attributes，它可以与城市名称在同一个 td 中，如下所示：

<td data-id="city">Chikago</td>

然后点击按钮——需要获取一个td的数据属性和文本。

Answer 2

请务必记住，每个文档只能有一个 id。这样想

classes：根据元素的特征对元素进行分类

ids：是元素的唯一标识徽章。它可以说“嘿，我是元素编号 158493，我为此感到自豪！”

接下来，在分类为 show 的元素上侦听 click 事件。要找到实际的城市名称，您必须遍历 DOM。首先使用prev() 获取父母，然后获取其哥哥。这将为您提供前一个 td 元素。现在向下遍历它的子元素，即 span 元素。

希望这会有所帮助。

$(".show").on("click", function() {
  var cityValue = $(this).parent().prev().find("span").html();
  $("#city-value").html(cityValue);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table id="t1" style="border:1px solid">       
    <tr>
      <td>
        <span class="city">Chikago</span>
      </td>
      <td>
        <span>USA</span>
      </td>
      <td>
        <button class="show">Show me</button>
      </td>
    </tr>
    <tr>
      <td>
        <span class="city">London</span>
      </td>
      <td>
        <span>UK</span>
      </td>
      <td>
        <button class="show">Show me</button>
      </td>
    </tr>
    <tr>
      <td>
        <span class="city">Delhi</span>
      </td>
      <td>
        <span>INDIA</span>
      </td>
      <td>
        <button class="show">Show me</button>
      </td>
    </tr>

</table>
  
<p id="city-value"></p>

Answer 3

您应该使用closest() 和find() 来获取同一行中的跨度。另外，不要在 HTML 元素中重复使用 ids。

$(".show").on("click", function() {
  var spans = $(this).closest("tr").find("span");
  var city = spans.eq(0).text();
  var country = spans.eq(1).text();
  console.log(city, country);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="t1" style="border:1px solid">       
  <tr><td><span>Chikago</span></td><td><span>USA</span></td><td><button type="button" class="show">Show me</button></td></tr>
  <tr><td><span>London</span></td><td><span>UK</span></td><td><button type="button" class="show">Show me</button></td></tr>
  <tr><td><span>Delhi</span></td><td><span>INDIA</span></td><td><button type="button" class="show">Show me</button></td></tr>
</table>