无法获取第二行-第一列的值

cannot get second row->first column value

本文关键字：一列 二行 获取      更新时间：2023-09-26

我无法使用这个函数获得第二行->第一列的值:

$("#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>

点击第一个"delete"提示值为1…第二个"删除"没有任何作用。

这里有一把小提琴:小提琴

不能有多个项目具有相同的id。尝试使用class代替:

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

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

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

并更改选择器

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

按钮也是一样，使用类。

可以通过使用data属性来避免整个树的反转!

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"));
});
相关文章：