在表格加载时,在表格行中生成新的唯一名称和ID

时间:2013-05-29 14:13:13

标签: jquery html-table attributes row

<table border="1" id="matt">
<tr> 
     <td><input type="text" id="txtTitle" name="txtTitle"></td> 
     <td><input type="text" id="txtLink" name="txtLink"></td> 
</tr>
<tr> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
</tr>
<tr> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
</tr>

<script language="javascript">
var i = 1;
$(window).load(function() {
$("tbody tr:last").find("input").each(function() {
$(this).attr({
  'id': function(_, id) { return id + i },
  'name': function(_, name) { return name + i },
  'value': ''               
});
}).end().appendTo("#matt");
i++;
});
</script>

给出这段代码..我想在表格加载时从表格的第一行生成并复制属性/标签,它应该是唯一的......有什么帮助?我很难过。

1 个答案:

答案 0 :(得分:0)

好的,如果您只希望将第一个表行的输入标记中的那些修改后的属性复制到表格的所有其他行的输入中,您可以使用此算法:

$(document).ready(function () {
    var rows = $("table tbody tr");
    var txtTitle = rows.first().find('input').eq(0);
    var txtLink = rows.first().find('input').eq(1);
    rows.each(function (i) {
        if (i==0) { return; } // skip first row.
        var inputs = $(this).find('input');
        inputs.eq(0).attr('id', txtTitle.attr('id')+i )
            .attr('name', txtTitle.attr('name')+i )
            .attr('value', txtTitle.attr('value')+i );
        inputs.eq(1).attr('id', txtLink.attr('id')+i )
            .attr('name', txtLink.attr('name')+i )
            .attr('value', txtLink.attr('value')+i );
    });
});

以上代码已经过测试here,其简化版本为here

在jQuery中克隆一行也很简单,例如:

$('table#matt tbody').append($('table#matt tbody tr:first').clone());