单击按钮时循环匹配表

Question

我有一个动态生成的 html 代码，看起来像：

<div class="systeme">
    <table method="post" class="table table_cultures">
        <tr class="formRows">
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
        </tr>
    </table>
    <button class="btn btn-default valider_systeme_culture">Valider</button>
</div>

<div class="systeme">
    <table method="post" class="table table_cultures">
        <tr class="formRows">
            <td>Something 2</td>
            <td>Something 2</td>
            <td>Something 2</td>
            <td>Something 2</td>
        </tr>
    </table>
    <button class="btn btn-default valider_systeme_culture">Valider</button>
</div>

当我单击其中一个按钮时，我想使用 javascript 循环通过匹配表并且仅此表。

目前，当我单击一个按钮时，我会获取两个表的所有数据。

在 Javascript 中，我有这个：

var table = $(".table_cultures tbody");
table.find('.formRows').each(function (i) { ... });

我也尝试了函数.parents()，但之后我无法执行.find('.table_cultures tbody)，它不起作用。问题是我需要找到table_cultures tbody，因为它允许我在有 tbody 时遍历行。

我应该如何循环正确的表？

Answer 1

Nenad Vracar 的方法几乎没问题；但原始问题明确指出表是动态生成的，因此委托事件应该更安全。

$('body').on('click', '.btn', function() {
  $(this).siblings('table')
    .find('.formRows')
    .each(function (index, elem) {
      //var $elem = (this);
      //either use the function parameters is the this variable
      //to do something with the current row
    });
});

Answer 2

您可以使用$(this).prev('table')，其中$(this) 是单击按钮，然后您会得到prev("table") DEMO

$('.btn').click(function() {
  $(this).prev('table').find('.formRows').css('background', 'red')
})