可能重复:
How to use jQuery to add a new row to a table, and assgin an incrementing id to it
我有一些表格行如下:
<td><input id="RS_Staff_Title1" name="RS_Staff_Title1" style="width:100%;"></td>
<td><input id="RS_No_WD_Staff1" name="RS_No_WD_Staff1" style="width:100%;"></td>
<td><input id="RS_No_Weekdays1" name="RS_No_Weekdays1" style="width:100%;"></td>
<td><input id="RS_No_WE_Staff1" name="RS_No_WE_Staff1" style="width:100%;"></td>
<td><input id="RS_No_WE_Days1" name="RS_No_WE_Days1" style="width:100%;"></td>
<td><img class="remove_row" src="assets/images/delete-icon.png"></td>
然后我得到一个按钮,它取最后一个表格行并将其克隆到下面一个,因此使用此Jquery添加一个新行“
$("#add_row").click(function() {
$('#staff tbody>tr:last').clone(true).insertAfter('#staff tbody>tr:last');
return false;
});
我需要发生的是RS_Staff_Title1变为RS_Staff_Title2,RS_Staff_Title3等等 - 同样会发生在其他列上。
我怎样才能实现这个目标?
答案 0 :(得分:4)
一种可能的解决方案:
$("#add_row").click(function() {
var row = $("#staff tbody > tr:last"),
newRow = row.clone(true);
newRow.find("input").each(function() {
var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
this.id = this.id.replace(/\d+$/, "") + num;
this.name = this.id;
});
newRow.insertAfter(row);
return false;
});
答案 1 :(得分:1)
你可以试试这个
$("#add_row").click(function() {
$('#staff tbody>tr:last').clone(true).insertAfter('#staff tbody>tr:last')
.find('input').attr({'name':'RS_Staff_Title'+$('#staff tbody>tr').length, 'id':'RS_Staff_Title'+$('#staff tbody>tr').length
});
});
答案 2 :(得分:0)
如果您不需要输入'ID,您可以使用数组,HTML将分配递增的数字:
<td><input name="RS_Staff_Title[]" style="width:100%;"></td>
<td><input name="RS_No_WD_Staff[]" style="width:100%;"></td>
<td><input name="RS_No_Weekdays[]" style="width:100%;"></td>
<td><input name="RS_No_WE_Staff[]" style="width:100%;"></td>
<td><input name="RS_No_WE_Days[]" style="width:100%;"></td>
<td><img class="remove_row" src="assets/images/delete-icon.png"></td>
答案 3 :(得分:0)
$('#staff tbody>tr:last').clone(true).appendTo('#staff tbody>tr:last');
答案 4 :(得分:0)
试试这个
var j = 1;
var arr = ["RS_Staff_Title", "RS_No_WD_Staff", "RS_No_Weekdays", "RS_No_WE_Staff", "RS_No_WE_Days"]
$("#add_row").click(function() {
j++;
var $last = $('#staff tbody>tr:last');
$last.clone(true).insertAfter('#staff tbody>tr:last');
// Chaching it again to conter for the newly added Row...
$last = $('#staff tbody>tr:last');
// Selecting all the td's in the newly added row..
var $td = $('#staff tbody>tr:last td');
$.each(arr, function(i) {
if(i > 4)
return false;
$($td[i]).find('input').attr('id' , (arr[i] + j ));
$($td[i]).find('input').attr('name' , (arr[i] + j ));
// Not considering the Images
});
return false;
});