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 ...秒“删除”不执行任何操作。

这是一个小提琴： Fiddle

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

Answer 2

IDS ARE UNIQUE，您不能在网页上多次使用相同的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"));
});

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

2 个答案: