그래서, 나는 테이블에 내가 그것을 필요로하는 방식으로 행을 추가이 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> 

그 :: 기본적으로 색인을 생성하는 Toolkit 코드는 Catalyst :: Plugin :: Params :: Nested에서 HoAoH가 될 요소를 추적 할 수 있습니다. 그것이 반복적이고 비입니다, 나는 정말 정말 복사 붙여 넣기의 아이디어를 스크립트 자체에 테이블 행 태그를 좋아하지 않는다

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