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

收集对象数组中的text / checkbox值：

$('#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>包装整个模板字符串，你应该好好去。每次添加时都会添加额外的标签。

请参阅此fiddle

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/

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

3 个答案: