有一个表格，javascript控制添加行和删除行，部分如下:
<ul class="c-listUnstyled clearfix p-postion_base">
<li class="u-mt-content">
<a href="#" id="add_btn" name="add_btn" class="p-button_base p-button_type01 p-btn_top-right">加一行</a>
</li>
</ul>
<table id="prize_list" class="c-table_data_list c-table c-table_fixed u-text-center">
<tbody>
<tr>
<th class="u-text-center c-table_data_list--th u-percent15">第一列</th>
<th class="u-text-center c-table_data_list--th u-percent14">第二列</th>
<th class="u-text-center c-table_data_list--th">第三列</th>
<th class="u-text-center c-table_data_list--th">删除列</th>
</tr>
<tr>
<td class="c-table_data_list--td u-text-middle">1</td>
<td class="c-table_data_list--td u-text-middle">
<input class="p-form__input u-w-max p-float_l" type="text" name="step[0]" value="">
</td>
<td class="c-table_data_list--td u-text-middle u-text-left">
<input class="p-form__input u-w-max p-float_l" type="text" name="point[0]" value="">
</td>
<td class="c-table_data_list--td u-text-middle"></td>
</tr>
<tr>
<td class="c-table_data_list--td u-text-middle">2</td>
<td class="c-table_data_list--td u-text-middle">
<input class="p-form__input u-w-max p-float_l" type="text" name="step[1]" value="">
</td>
<td class="c-table_data_list--td u-text-middle u-text-left">
<input class="p-form__input u-w-max p-float_l" type="text" name="point[1]" value="">
</td>
<td class="c-table_data_list--td u-text-middle">
<a href="#" name="delete_check_point" class="p-button_base--table p-button_type03 delete-row">删除</a>
</td>
</tr>
<tr>
<td class="c-table_data_list--td u-text-middle">3</td>
<td class="c-table_data_list--td u-text-middle">
<input class="p-form__input u-w-max p-float_l" type="text" name="step[2]" value="">
</td>
<td class="c-table_data_list--td u-text-middle u-text-left">
<input class="p-form__input u-w-max p-float_l" type="text" name="point[2]" value="">
</td>
<td class="c-table_data_list--td u-text-middle">
<a href="#" name="delete_check_point" class="p-button_base--table p-button_type03 delete-row">删除</a>
</td>
</tr>
</tbody>
</table>
现在我有一个类似如下的增加行和删除行的按钮，其中第一行索引为[0]的行不会被删除
$(document).ready(function () {
$('#add_btn').on('click', function (e) {
e.preventDefault();
var cnt = $('#prize_list tbody tr').length + 1;
$('#prize_list tbody').append(
'<tr>' +
' <td class="c-table_data_list--td u-text-middle">' +
cnt +
'</td>' +
' <td class="c-table_data_list--td u-text-middle">' +
' <input class="p-form__input u-w-max p-float_l" type="text" name="step[' +
(cnt - 1) +
']" value="">' +
' </td>' +
' <td class="c-table_data_list--td u-text-middle u-text-left">' +
' <input class="p-form__input u-w-max p-float_l" type="text" name="point[' +
(cnt - 1) +
']" value="">' +
' </td>' +
' <td class="c-table_data_list--td u-text-middle">' +
' <a href="#" name="delete_check_point" class="p-button_base--table p-button_type03 delete-row">削除</a>' +
' </td>' +
'</tr>'
);
});
$('#prize_list').on('click', 'a.delete-row', function (e) {
e.preventDefault();
var row = $(this).closest('tr');
var index = row.index();
if (index > 0) {
row.remove();
}
});
});
但是这样出现一个问题，在下一个页面的确认并循环出数据入库的时候，会出现索引中的断档情况从而出现错误,如step[0]之后直接就是[2]而[1]被删除了，而且好像第一列的排序也会有断档，请问有无办法避免这一情况，谢谢(并非删除对应的哪一行直接从索引最大的地方开始删除也可，从而使排序变得简单？
重置第一列序号的同时重置下name的值，要不删除后会断开
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！方法一，
function deepcopy(obj){
if(Array.isArray(obj)){
var newObj = [];
}else{
var newObj = {}
}
for (var i in obj) {
if(typeof obj[i] == 'object'){
newObj[i] = deepcopy(obj[i]);
}else{
newObj[i] = obj[i];
}
}
return newObj;
}
var ss = {a:[1]};
var ss1 = deepcopy(ss);
ss["a"].push(2);
console.log(ss,ss1);
方法二，运用json的方法
function deepClone(obj) {
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}