javascript - 我想获取 HTML 表中每个 href 单击的第一列行的值

Question

我想获取每行 href 单击 EDIT 上的第一列行值。例如，如果我单击第一行 href，那么我应该收到其第一列行值的警报。

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><a href="#menu1">Edit</a</td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

我的 HTML 代码

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

<table border="1" width="100%">
<thead>
<tr>
  <th>#</th>
  <th>Id</th>
  <th>Name</th>
  <th>Action</th>
</tr>
</thead>

<tbody>
</tbody>
</table>

Answer 1

给定生成的 HTML 结构如下，其中 n 行动态添加到 <tbody> :

<table border="1" width="100%">
  <thead>
    <tr>
      <th>#</th>
      <th>Id</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>
        <a>Edit</a>
      </td>
    </tr>
    <tr><!-- n dynamically generated rows --></tr>
  </tbody>
</table>

您可以使用以下 jQuery 来执行 alert()使用提供上下文的点击处理程序在相应行的第一列中显示文本:

$(document).ready(function(){
    $('tbody').on('click', 'a', function(){
        var value = $(this).closest('tr').find('td').first().text();
        alert(value);
    });
});

这是一个jsfiddle演示功能。它演示了被警报的第一列的值，并通过在 <a> 上执行事件的单击事件显示动态/添加的行。点击。这是因为<a>元素不是直接定位的，它们作为永久 DOM 元素的上下文提供，例如不会添加或删除的元素。

更新

如果您需要获取其他列，您可以使用 eq() 构建 jQuery 查询。获取基于零 (0) 的索引。例如，如果您需要第二列，您可以:

// first column
var value = $(this).closest('tr').find('td').eq(0).text();

// second column
var value = $(this).closest('tr').find('td').eq(1).text();

// third column
var value = $(this).closest('tr').find('td').eq(2).text();

希望有帮助!