javascript - 无法获得第二行->第一列值

Question

我无法使用此函数获取第二行->第一列值：

$("#clear").on("click", function(){
    var curKey = $(this).closest("tr").children("td#key").text();
    alert (curKey);
});

使用这个 html：

<table>
  <tr>
    <td id="key">1</td>
    <td>Some Text</td>
    <td><a href="javascript:void(0);" id="clear">Delete</a></td>
  </tr>
  <tr>
    <td id="key">2</td>
    <td>Some More Text</td>
    <td><a href="javascript:void(0);" id="clear">Delete</a></td>
  </tr>
</table>

单击第一个“删除”警报值 1... 第二个“删除”什么也不做。

这是一个小提琴： 小提琴

Answer 1

您不能有多个具有相同id. 尝试使用 aclass代替：

$(".clear").on("click", function() {
  var curKey = $(this).closest("tr").children(".key").text();
  console.log(curKey);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="key">1</td>
    <td>Some Text</td>
    <td><a href="javascript:void(0);" class="clear">Delete</a>
    </td>
  </tr>
  <tr>
    <td class="key">2</td>
    <td>Some More Text</td>
    <td><a href="javascript:void(0);" class="clear">Delete</a>
    </td>
  </tr>
</table>

Answer 2

IDS 是唯一的，您不能在页面上多次使用相同的 id。使用一个类。

<td class="key">1</td>

并更改选择器

$(this).closest("tr").find(".key").text();

按钮也一样，使用类。

您可以通过使用数据属性来避免整个树的反转！

HTML：

<td><a href="javascript:void(0);" class="clear" data-id="1">Delete</a></td>

JavaScript：

$("table tbody").on("click", "a.clear", function(){
    alert($(this).data("id"));
});