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，我试图在点击第二行的按钮时获取2bd行，第二列值，但我无法理解如何选择tanle roes，列数据。

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

请为此问题提供正确的jquery代码。

Answer 1

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

＆＃13;

$(".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);
});

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

Answer 3

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

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

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

继续前进，听取归类为click的元素的show事件。要查找实际的城市名称，您必须遍历DOM。首先得到父母，然后是prev()的哥哥。这将为您提供之前的td元素。现在向下遍历其子元素，即span元素。

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在

3 个答案: