jQuery通过单击按钮上的数据表迭代/循环答案

【问题标题】：jQuery iterate/loop throught data table on click buttonjQuery通过单击按钮上的数据表迭代/循环
【发布时间】：2017-01-25 06:26:29
【问题描述】：

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

<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 的东西！

谢谢

【问题讨论】：

标签： javascript jquery for-loop datatable each

【解决方案1】：

如果您的所有结果都由服务器呈现并且您只是添加它，那么为什么不将 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都不好用，推荐你使用button的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>

【讨论】：

是的，这些元素正在使用 ajax 加载，我想到了一个“addEventListener”，但找不到方法。我要试试你的解决方案。谢谢。
.on 函数使用的是 HTMLElement.addEventListener，它们几乎是一回事，jQuery 只是在内部保存了一些帮助器，例如可以删除事件监听器的 .off 方法。
这就是我在选择 jQuery 而不是“经典”javascript 之前首先想到的。因为起初我开始编写一个“简单”的 for 循环函数，但未能实现我的目标。所以我可能错过了一些东西。不过，这很高兴知道。
@Horacio var buttons = document.querySelectorAll('tbody .detail-edit'); button.forEach(element => element.addEventListener(itemEdit));顺便说一句，如果答案是回答你想要的，那么请接受它。如果没有，请询问详细信息，我会更新我的答案。
感谢您的回答 - 这也很有帮助，我学到了一些新东西。

【解决方案2】：

这样的事情应该可以工作。

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

【讨论】：

它确实有效......而且比我正在努力的更简单！伟大的。谢谢。