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

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

0 голосов
/ 30 апреля 2010

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

<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>

Этот код шаблона представляет собой код Template :: Toolkit, который в основном просто генерирует индекс, поэтому я могу отслеживать элементы в том, что станет 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 создаст правильное структура.

Мысли

1 Ответ

4 голосов
/ 30 апреля 2010

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

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