代码没有特殊需求,第一列使用bootstrap的符号。
删除：class为delectitem
添加：class为plusitem
<section style="width:100%;overflow:hidden;overflow-x:auto;">
<table border="1" cellpadding="0" cellspacing="0" style="border:1px solid #d0d0d0;">
<tr>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;"></td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">序号</td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">标题</td>
</tr>
<tr>
<td align="center" bgcolor="#EFEFEF" style="width:4em;border:1px solid #d0d0d0;"><i class="delectitem bi bi-trash" style="color:red;" data-toggle="tooltip" title="删除"></i><i class="plusitem bi bi-plus-square" style="padding-left:1em;color:blue;" data-toggle="tooltip" title="增加一行"></i></td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">1</td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">内容</td>
</tr>
<tr>
<td align="center" bgcolor="#EFEFEF" style="width:4em;border:1px solid #d0d0d0;"><i class="delectitem bi bi-trash" style="color:red;" data-toggle="tooltip" title="删除"></i><i class="plusitem bi bi-plus-square" style="padding-left:1em;color:blue;" data-toggle="tooltip" title="增加一行"></i></td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">2</td>
<td align="center" bgcolor="#EFEFEF" style="width:4em;height:2em;border:1px solid #d0d0d0;">内容</td>
</tr>
</table>
</section>
<script>
//添加行
function AddRow() {
// 被点击的目标标签tagName 如INPUT DIV
var clicktagname = $(event.target).get(0).tagName;
//获取点击对象
var clickedNode = event.target;
var $table = $(clickedNode).closest("section").find("table:first");
var tableId = $table.attr("id");
//var $table=$("#" tableId);
var numRows = $table.find("tr").length; //行数
if(numRows > 20) { //数据行最多10行 共11行
mscAlert("别再加了！");
return false;
} else {
numRows = $table.find("tr").length;
$("#" tableId " tr:last").clone(false).insertBefore("#" tableId " tr:eq(1)");
}
for(var i = 1; i < numRows 1; i ) { //第二列序号
$('#' tableId ' tr:eq(' i ') td:eq(1)').text(i);
}
}
//产生随机标识符 前面以四个字母开头长度为n1 n2的字符串
function getUuid() {
var s = [];
var s1 = [];
var hexDigits1 = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var hexDigits1length = hexDigits1.length;
var hexDigits2 = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var hexDigits2length = hexDigits2.length;
var n1 = 4; //随机前端字母字符串长度
var n2 = 32; //随机后端数字字母字符串长度
for(var i = 0; i < n1; i ) {
s[i] = hexDigits1.substr(Math.floor(Math.random() * (hexDigits1length - 1)), 1);
}
for(var i = 0; i < n2; i ) {
s1[i] = hexDigits2.substr(Math.floor(Math.random() * (hexDigits2length - 1)), 1);
}
////数组合并 a.push.apply(a,b);//将b合并到a中
s.push.apply(s, s1); //将s1合并到s中
//第3个位置插入-
s[2] = "-";
//第4个字符之后插入最多3个-
for(var i = 0; i < 3; i ) {
s[Math.floor(Math.random() * (n1 n2 - 5)) 4] = "-";
}
let uuid = s.join("");
return uuid;
}
</script>
<script>
$(function() {
//绑定删除表格条目
$("table").delegate(".delectitem", "click", function() {
var numRows = $(this).closest("table").find("tr").length; //行数
var tableId = $(this).closest("table").attr("id");
var objdel=$(this).closest("tr");
if(numRows == 2) {
//mscAlert("不能再删了！");
} else {
//mscConfirm("Delete", "你确定删除该行数据吗?", function(){
//objdel.remove();
//});
/*}*/
if(confirm("确定要删除吗？")){
objdel.remove();
for(var i = 1; i < numRows 1; i ) { //第二列序号
$('#' tableId ' tr:eq(' i ') td:eq(1)').text(i);
}
}
}
});
//表格添加行
$("table").delegate(".plusitem", "click", function() {
//获取表格ID 如果没有动态给表格添加ID
var thisID = $(this).closest("table").attr("id");
if(typeof thisID !== typeof undefined) {
var ID = thisID;
} else {
ID = getUuid(); //ID 必须以字母开头
$(this).closest("table").attr("id", ID);
}
//添加行
AddRow();
});
});
</script>
