遍歷匹配表上的一個按鈕，當點擊

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

您可以使用$(this).prev('table')其中$(this)點擊按鈕，然後你會得到prev("table")DEMO

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

Answer 2

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 
    }); 
});