Итак, у меня есть Jquery бит, который добавляет строку в таблицу, как мне нужно это, но это некрасиво

Question

У меня есть таблица, которая выглядит следующим образом:

<table name="exercises" id="workout-table"> 
<tr> 
<th>Name</th> 
<th>Reps/Intervals</th> 
<th>Sets</th> 
<th>Weight/Distance/Time</th> 
</tr> 


[%- i=0 %] 
[% WHILE i<=10 %] 
<tr class="workout-rows"> 
<td><input type="text" name="workout[exercise][[% i %]][name]" /></td> 
<td><input type="text" name="workout[exercise][[% i %]][repetitions]" size="3"/></td> 
<td><input type="text" name="workout[exercise][[% i %]][sets]" size="3"/></td> 
<td><input type="text" name="workout[exercise][[% i %]][weight]" size="4"/></td> 
</tr> 
[% i = i + 1 %] 
[% END %] 

</table> 

Этого шаблон код шаблон :: Код инструментария, который в основном просто генерирует индекс, поэтому я могу отслеживать элементы в том, что станет HoAoH от Catalyst :: Plugin :: Params :: Nested. Это Javascript, что на самом деле добавляет строку в таблицу по нажатию кнопки:

$("#add-row").click(function(){ 
     var size = $(".workout-rows").length; 
     //size += 1; 
     var row ='<tr class="workout-rows">' + 
     '<td><input type="text" name="workout[exercise][' + size + '][name]" /></td>' + 
     '<td><input type="text" name="workout[exercise][' + size + '][repetitions]" size="3"/></td>' + 
     '<td><input type="text" name="workout[exercise][' + size + '][sets]" size="3"/></td>' + 
     '<td><input type="text" name="workout[exercise][' + size + '][weight]" size="4"/></td>' + 
     '</tr>'; 

     $("#workout-table >tbody tr:last").after(row) 
    }); 

Я действительно не нравится идея копирования вставки строки таблицы разметки в самом скрипте, так как это повторяющиеся и не -Интуитивный. Я пробовал .clone, который отлично подходит для копирования строки дословно, но он не отслеживает количество строк динамически, как мне нужно.

Итак, в основном я поразмыслил над тем, чтобы узнать, как испортить имя каждого входа, чтобы он соответствовал индексу цикла, поэтому Catalyst :: Plugin :: Params :: Nested будет создавать правильная структура.

Мысли?

Answer 1

Вы должны сделать функцию, которая возвращает клон таблицы. Я использую это для шаблонов все время:

<div id="tableTemplate" style="display: none;"> 
    <table> 
     <tr class="workout-rows"> 
     <td> <input type="text" name="" /> </td> 
     <td> <input type="text" name="" size="3" /> </td> 
     <td> <input type="text" name="" size="3" /> </td> 
     <td> <input type="text" name="" size="4" /> </td> 
     </tr> 
    </table> 
</div> 

Затем вы клонируете этот шаблон.

function createTableRow(size) 
{ 
    var template = $('#tableTemplate').clone(true); 
    template = template.find('tr'); // Dont need to clone the table tag 
    template.find('td:nth-child(1)').find('input').attr('name', 'workout[exercise][' + size + '][name]'); 

    // Similar logic for the other names 

    return template; 
}