Donc, j'ai ce bit jquery qui ajoute une ligne à une table la façon dont je besoin, mais il est LAID

Question

J'ai une table qui ressemble à ceci:

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

Ce code du modèle est Template :: Un code de Toolkit qui génère simplement un index pour que je puisse garder trace des éléments dans ce qui va devenir un HoAoH de Catalyst :: Plugin :: Params :: Nested. Ceci est le javascript qui ajoute en fait la ligne à la table sur le bouton clic:

$("#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) 
    }); 

Je vraiment n'aime vraiment pas l'idée de copier-coller la table balisage de la ligne dans le script lui-même, comme il est répétitif et non -intuitif. J'ai essayé des trucs .clone, ce qui fonctionne bien pour copier la ligne verbatim, mais il ne garde pas trace du nombre de lignes dynamiquement comme j'en ai besoin. Donc, fondamentalement, je l'ai réduit à avoir besoin de savoir comment jouer avec le nom de chaque entrée afin qu'il puisse refléter l'indice de boucle de manière appropriée, donc Catalyst :: Plugin :: Params :: Nested va construire le structure correcte.

Pensées?

Answer 1

Vous devez créer une fonction qui renvoie un clone de table. Je l'utilise pour modéliser tout le temps:

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

Ensuite, vous clonez ce modèle.

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