html怎样增加一行,html怎么设置只显示一行

代码没有特殊需求,第一列使用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>