jQuery在单击按钮上迭代/循环遍历数据表

Question

我有一个表，用于呈现数据库的结果。 因为结果是一个“矩阵”，所以标记将给出

<table>
<thead>
</thead>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
    <tbody>
        <td>some datas inside TDs</td>
        <td>Last TD<button class = 'btn-action-edit'></button></td>
    </tbody>
<tfooter>
</tfooter>
</table>

对于表格中的每一行，我都有一些允许执行某些操作的按钮（即“编辑” /“发布”等）。 当单击一个按钮时，我希望它执行一些操作。 为此，我做了以下工作：

$('tbody:nth-child(2) .btn-action-edit').on('click', function() {
    $('tbody:nth-child(2) .detail-edit').toggleClass('open');
});
$('tbody:nth-child(2) .close-edit').on('click', function() {
    $('tbody:nth-child(2) .detail-edit').toggleClass('open');
});

$('tbody:nth-child(3) .btn-action-edit').on('click', function() {
    $('tbody:nth-child(3) .detail-edit').toggleClass('open');
});
$('tbody:nth-child(3) .close-edit').on('click', function() {
    $('tbody:nth-child(3) .detail-edit').toggleClass('open');
});

但是假设我的数据库中有50多个条目或1000多个条目，那么完成这项工作将是一场噩梦

我尝试了一些：

$('table > tbody td:last-child').each(function (index) {
    $(this).find('.btn-action-edit').on('click', function(e) {
            e.preventDefault();
            $('.detail-edit').toggleClass('open');
    });
});

但它不起作用！

关于这个的任何想法; 我缺少有关循环和/或DOM的东西！

谢谢

Answer 1

这样的事情应该起作用。

$(".btn-action-edit").on("click", function()  {
    $(this).closest("tbody").find(".detail-edit").toggleClass("open");
});

更新：

通过Ajax加载内容时，您可以设置一个通用的事件侦听器，如下所示：

$(document).on("click", ".btn-action-edit", function() {
    $(this).closest("tbody").find(".detail-edit").toggleClass("open");
});

然后，它将拾取项目在加载时是在页面上还是在以后使用Ajax拉入。

Answer 2

如果所有结果都由服务器呈现，而您只添加了它，那么为什么不将eventListener添加到类中并相对于事件目标使用它们呢？

$('button.btn-action-edit').on('click', function() {
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
});

$('button.close-edit').on('click', function() {
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
});

如果要使用ajax加载元素，则还必须将侦听器添加到添加的内容中。 但是很多eventListener都不是很好，我建议您使用按钮onclick属性：

<button class="btn-action-edit" onclick="itemEdit(this);"> ... </button>
<button class="close-edit" onclick="closeItemEdit(this);"> ... </button>

<script>
function itemEdit( element )
{
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
}

function closeItemEdit( element )
{
    $(this).closest('tbody').find('.detail-edit').toggleClass('open');
}
</script>