jQuery动态表输入

时间:2013-07-09 23:12:50

标签: javascript jquery css html-table

我正在使用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
    }
};

1 个答案:

答案 0 :(得分:0)

您可以使用更多常规选择器在一个事件中选择所需的所有输入。

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应始终是唯一的。