jQuery 동적 테이블 입력

Question

JS로 학교 프로젝트에서 일하고 있는데, 문제의 힘을 입력하는 양식을 만들었고 (jquery를 통해) HTML을 편집하여 새로운 내가 입력 한 행 뒤에 입력 행이 추가됩니다.

내 문제 : 이러한 새로운 입력을 사용할 수있게되었으므로 해당 값을 나중에 배열에서 사용할 수 있도록 배열과 동일하게 설정하려고합니다. 내 루프 수를 내 루프에 대해 동일한 작동하는 for 루프를 설정하고 새 행의 단추를 클릭하여 각 힘을 기록하도록하려고합니다. 문제는 그것이 녹음되지 않는다는 것입니다.

누구나 배열에서이 값을 얻을 수있는 방법에 대한 아이디어가 있습니까? 대단히 감사하겠습니다.

동적 인 형식이나 테이블을 쉽게 이해할 수있는 프레임 워크를 알고 계신 분도 계실 것입니다.

function forceRecording(numofforces) { 
    for(var i =0; i<numofforces; i++) { 
     $('#button1').parent().parent().after("<tr><td>Force DFO " + i +":</td><td><form><input type='text' name='lengthMeasure'/></form></td><td><div class='button' id='lengthButton"+i+"'>Add!</div></td></tr>") 
     $('#button2').parent().parent().after("<tr><td>Force " + i +":</td><td><form><input type='text' name='forceMeasure'/></form></td><td><div class='button' id='forceButton"+i+"'>Add!</div></td></tr>") 
    } 

    for(var i = 0; i < numofforces;i++) { 
     $("#forceButton"+i).click(function(){ 
      force[i]= $('select[name=forceMeasure]').val(); 
     }); 
     $('#forceButton'+i).after("<p>"+force[i]+"</p>"); //only temporary to check if the force is actually in the variable 
    } 
}; 

Answer 1

보다 일반적인 선택기를 사용하여 한 이벤트에서 필요한 모든 입력을 선택할 수 있습니다.

function forceRecording(numofforces){ 
for(var i =0; i<numofforces; i++){ 
    $('#somediv').after("<tr><td>Force DFO " + i +":</td><td><input type='text' id='lengthMeasure"+i+"'/></td><td><div class='button' id='lengthButton_"+i+"'>Add!</div></td></tr>") 
    $('#someotherdiv').after("<tr><td>Force " + i +":</td><td><input type='text' id='forceMeasure_"+i+"'/></td><td><div class='button' id='forceButton_"+i+"'>Add!</div></td></tr>") 
} 
}; 
$("div.button[id^='forceButton']").live("click",function(){ 
    var num = parseInt($(this).attr("name").split("_")[1]); 
    force[num]=$('text[id=forceMeasure_'+num+']').val(); 
    console.log(force); 
}); 

이벤트를 첨부 할 새 요소를 생성하는 경우 Live를 사용하는 것이 더 좋습니다. 요소가 생성 될 때마다가 아니라 라이브를 사용하여 한 번 이벤트를 바인딩하면됩니다. 또한 페이지 당 하나의 양식 요소 만 필요합니다. 이름과 ID는 항상 고유해야합니다.