Добавить строку в таблицу внутри ошибки цикла

Question

У меня была таблица внутри цикла, и я хочу добавить строку в таблицу, нажав кнопку «добавить строку». Вот мой код

HTML:

<div id="popUp" style="display: none"> 
    <input type="button" value="Cancel" onclick="closePopup()"> 
    <input type="button" value="ADD" onclick="addRow(this)"/> 
</div> 
@for (int i = 0; i < 3; i++) { 
    <table id="table @i" class="tableSum"> 
     <thead> 
      <tr> 
       <td>Items</td> 
       <td>Quantity</td> 
       <td>Price</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Apple</td> 
       <td>5</td> 
       <td>100</td> 
      </tr> 
      <tr> 
       <td>Organe</td> 
       <td>5</td> 
       <td>200</td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td>Total</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr><td colspan="3"><input type="button" class="addRow" onclick="addRow(this)" value="ADD ROW"/></td></tr> 
     </tfoot> 
    </table> 
} 

затем в JavaScript я написал функцию:

function addRow(table) { 
    $(table).find('tbody tr:last').clone().appendTo(table); 
} 

но это не добавляет строку. Если я использую функцию без параметра «таблица», новая строка будет добавлена ​​ко всем таблицам внутри цикла.
Мой желаемый результат: когда пользователь нажимает кнопку, новая строка будет добавляться только в одну таблицу, а не ко всем.

Answer 1

Вы должны использовать closest найти свою родительскую таблицу первой:

function addRow(table) { 
    $(table).closest('table')//find parent table 
     .find('tbody tr:last')//find last tr of the table 
     .clone()//clone it 
     .appendTo($(table).closest('table').find('tbody'));//append it to tbody 
    //append to 'tbody' not this row 
} 

---

В соответствии с обновленной вопрос, здесь вы идете:

function addRow(table) { 
    $(table).parent()//find parent div 
     .next()//get the table 
     .find('tbody tr:last')//find last tr of the table 
     .clone()//clone it 
     .appendTo($(table).parent().next().find('tbody'));//append it to tbody 
    //append to 'tbody' not this row 
} 

Answer 2

onclick="addRow(this)" на td. this будет представлять ток td. Не table. Вы можете передать id или какой-либо селектор таблицы или найти родителя table в своем скрипте.

Вы можете использовать parents(), чтобы найти родителя table.

function addRow(td) { 
    var table = $(td).parents('table'); 
    var cloned = table.find('tbody tr:last').clone(); 
    table.find('tbody').append(cloned); 
} 

А также, если вы хотите, чтобы все события работать затем использовать clone(true). Иначе у вас есть bind событий на tr.