获取动态创建的输入元素的输入值

Question

我是Web开发的新手，我想要实现的是找到的每一行的当前行所有输入值的数组，例如：test1，true

虽然我可以获取动态创建的输入值，但最终还是会遇到一堆空白，可能还有标题吗？ 我也不确定我获取值的方法是否是最佳解决方案。 这是我到目前为止所拥有的： http : //jsfiddle.net/gcL9H/2/

<table id='categoriesTable' border='1'>
<tr>
    <th>Category</th>
    <th>X</th>
</tr>
<tr id='data'>
    <td><input value='test1' type='text' /></td>
    <td><input type='checkbox' /></td>
</tr>
</table>
<button id="addRow">Add</button>
<button id="saveCategories">Results</button>

$('#addRow').click(function()
{
    $('#categoriesTable').append("<tr></tr><tr></tr><td><input type='text'/></td><td><input type='checkbox'/></td>");
});

$('#saveCategories').click(function()
{
    $("#categoriesTable tr").each(function()
    {
        var row = [];
        $(this).find('td').each(function()
        {
            var type = $(this).find('input').attr('type');
            if(type == "text")
                row.push($(this).find('input').val());
            else
            if(type == "checkbox")
                row.push($(this).find('input').is(":checked"));
        })
        alert(row);
    })
});

提前致谢。

Answer 1

如其他答案中所述，您可以使用<tr>标签添加标记问题

$('#addRow').click(function(){
    $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
});

收集对象数组中的文本/复选框值：

$('#saveCategories').click(function(){
     var rows = [];
    // iterates each TR, skip header one
    $("#categoriesTable tr").each(function()   {
        if ( $('td',this).length>0) { // exclude header row
            var $td = $('td',this);
            // push an object of the row with label / checked properties
            rows.push({                
                label: $td.eq(0).find('input').val(),
                checked:  $td.eq(1).find('input').is(':checked')
            });
        }
    });

    // display results
    $("#results").empty();
    $(rows).each(function(index,element) {
        $("#results").append('row:' + index + ', label:' + element.label + ', checked:' + element.checked + '<br/>'); 
    });
});

我添加了<div id="results"></div>来显示收集的值。

小提琴： http : //jsfiddle.net/gcL9H/13/

Answer 2

$('#addRow').click(function() {
  $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
});

只需杀死多余的<tr>标记并用<tr>包裹整个模板字符串，就可以了。 每次添加时，您都会添加额外的标签。

看到这个小提琴

Answer 3

有两个问题：

正在添加额外的行：

$('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>");
// Remove all the extra <tr></tr>'s and just have one <tr> at the start, 
// one </tr> at the end

在第一行添加一个类，以便您可以忽略该类

<tr class="header">
    <th>Category</th>
    <th>X</th>
</tr>

并进行以下选择：

$("#categoriesTable tr:not(.header)").each(function()

更新的小提琴： http : //jsfiddle.net/gcL9H/3/