Javascript 使用HTML、CSS、JS添加行、编辑行、保存行、删除行

我正在做一些测试项目。我已经做了一些工作，比如添加编辑或保存，但是我遇到了一些编码问题。表添加行、编辑行、保存行、删除都可以正常工作，但当我删除时，sr不需要像1、2、3、4那样重新排列。有时桌子的结构也会断裂。有人能帮我吗

$（文档）.ready（函数（）{
$（“.addRow”）。单击（函数（）{
var trCount=$（“tr”）.长度；
如果（$（“.deleterow”）.是（“：可见”）{
$（“表”）。追加（“X”+trCount+”）；
}否则{
$（“表”）。追加（“X”+trCount+”）；
}
}); 
$（“.editAll”）。单击（函数（）{
$（“输入”）.attr（“只读”，false）；
});
$（“.saveAll”）。单击（函数（）{
$（“输入”）.attr（“只读”，true）；
$（“th:first child”）.hide（）；
$（“td:first child”）.hide（）；
});
$（“.delete”）。单击（函数（）{
$（“th:first child”）.show（）；
$（“td:第一个孩子”）.show（）；
});
$（文档）.find（“表”）.on（'click'，'.deleterow'，function（））{
$（this.parent（“tr”）.remove（）；
var总长度=$（“tr”）.长度；
$（“table”）.find（“tr:nth child（2）”）.children（“td.srno”）.html（）；
});
});
.addRow{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
editAll先生{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.saveAll{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.删除{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.fulltable{
宽度：100%；
边框：1px实心#000；
文本对齐：左对齐；
明确：两者皆有；
利润率：30px0；
}
.th表格{
边框：1px实心#000；
填充：10px；
}
.th表满：第一个孩子{
宽度：50px；
显示：无；
文本对齐：居中；
}
.满表th:n个孩子（2）{
宽度：100px；
文本对齐：居中；
}
.fulltable td{
边框：1px实心#000；
}
.fulltable td：第一个孩子{
宽度：50px；
显示：无；
文本对齐：居中；
}
.fulltable td:n个孩子（2）{
文本对齐：居中；
}
.全表td输入{
宽度：100%；
填充：10px；
边界：0；
框大小：边框框；
大纲：无；
}

删除
高级文书主任。
名称
身份证件
描述
X
1.
您可以循环每个
srno
来重新排序数字，只需将这些行添加到
$（“.saveAll”）。单击（）
函数：

var srno = 0;
$(".srno").each(function() {
    $(this).text(srno+1);
    srno++;
});


$（文档）.ready（函数（）{
$（“.addRow”）。单击（函数（）{
var trCount=$（“tr”）.长度；
如果（$（“.deleterow”）.是（“：可见”）{
$（“表”）。追加（“X”+trCount+”）；
}否则{
$（“表”）。追加（“X”+trCount+”）；
}
});
$（“.editAll”）。单击（函数（）{
$（“输入”）.attr（“只读”，false）；
});
$（“.saveAll”）。单击（函数（）{
$（“输入”）.attr（“只读”，true）；
var-srno=0；
$（“.srno”）。每个（函数（）{
$（本）.text（srno+1）；
srno++；
});
$（“th:first child”）.hide（）；
$（“td:first child”）.hide（）；
});
$（“.delete”）。单击（函数（）{
$（“th:first child”）.show（）；
$（“td:第一个孩子”）.show（）；
});
$（文档）.find（“表”）.on（'click'，'.deleterow'，function（））{
$（this.parent（“tr”）.remove（）；
var总长度=$（“tr”）.长度；
$（“table”）.find（“tr:nth child（2）”）.children（“td.srno”）.html（）；
});
});
.addRow{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
editAll先生{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.saveAll{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.删除{
边框：1px实心#000；
填充：6px 10px；
文字装饰：无；
颜色：#000；
显示：内联块；
}
.fulltable{
宽度：100%；
边框：1px实心#000；
文本对齐：左对齐；
明确：两者皆有；
利润率：30px0；
}
.th表格{
边框：1px实心#000；
填充：10px；
}
.th表满：第一个孩子{
宽度：50px；
显示：无；
文本对齐：居中；
}
.满表th:n个孩子（2）{
宽度：100px；
文本对齐：居中；
}
.fulltable td{
边框：1px实心#000；
}
.fulltable td：第一个孩子{
宽度：50px；
显示：无；
文本对齐：居中；
}
.fulltable td:n个孩子（2）{
文本对齐：居中；
}
.全表td输入{
宽度：100%；
填充：10px；
边界：0；
框大小：边框框；
大纲：无；
}

删除
高级文书主任。
名称
身份证件
描述
X
1.