Question

我希望每行上的第一列行值得到点击编辑。例如，如果我点击第一行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()，并使用提供上下文的Click处理程序：

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

希望这有帮助！

Answer 2

    $.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><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>';
        tr += '</tr>';
        $('tbody').append(tr);
    });

只需将其添加到onclick属性...

Answer 3

检查一下。

这完美无缺

$(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><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

         $('tbody .delete a').click(function(){
             alert($(this).closest('tr').find('td:first-child').text());
         });
});

这是更新的jsfiddle链接。看看这个。 https://jsfiddle.net/86n7qkpe/

我希望在HTML表格中的eack href单击中获得第一列行的值

3 个答案: