在页面上写一个table标签
在页面上写一个table标签，写一个按钮，响应单击事件，调用一个函数，没单击一次，为table增加一行数据，单元格中内容任意。网页加载完成时如图：
<style>
table {
border-collapse:collapse;
margin:auto;
border: 1px solid;
}
table td{
border: 1px solid;
}
</style>
<script>
window.onload = function(){
let table = document.getElementById("table");
let button = document.getElementsByTagName('button')[0];
let header = document.getElementById('header');
button.onclick = function(){
tr2 = header.cloneNode(true);
tr3 =tr2
table.appendChild(tr3)
}
}
</script>
</head>
<body>
<table id="table">
<tr id="header">
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
</table>
<button>添加</button>
</body>
下面代码放到js里面
//tableId为table的id
function addRow(tableId) {
//找到table
var tab = document.getElementById(tableId);
//获取table现有行
var tabRows = tab.rows;
//在现有行数后面新增一行（tr）
var newTr = tab.insertRow(tabRows.length);
//样式：居中
newTr.align = "center";
//在newTr（tr）中插入td
//（例子定义6列，可根据自身需求更改，除checkbox（删除需选中，若无删除功能，可更改）外无硬性规定）
var newTd0 = newTr.insertCell(0);//checkbox
var newTd1 = newTr.insertCell(1);//序号
var newTd2 = newTr.insertCell(2);//姓名
var newTd3 = newTr.insertCell(3);//性别
var newTd4 = newTr.insertCell(4);//年龄
var newTd5 = newTr.insertCell(5);//地址
//获取table现有行数
var i = tab.rows.length;
//动态id
var names = "name" + (i - 1);//（新增前有x个tr就-x，例：若只有表头一行（一个tr），则：-1）
var sexs = "sex" + (i - 1);//同上
var ages = "age" + (i - 1);//同上
var address_s = "address" + (i - 1);//同上
//样式：居中
newTd0.align = "center";//checkbox
newTd1.align = "center";//序号
newTd2.align = "center";//姓名
newTd3.align = "center";//性别
newTd4.align = "center";//年龄
newTd5.align = "center";//地址
//在对应的td中插入内容
newTd0.innerHTML = '<input type="checkbox"/>';
newTd1.innerHTML = i-1; //序号 （新增前有x个tr就-x，例：若只有表头一行（一个tr），则：-1）
newTd2.innerHTML = '<input type="text" name="names" id="' + names + '" maxlength="100" style="width: 65%; height: 22px; border: 1px solid #e6e6e6;"/>';
newTd3.innerHTML = '<select name="sexs" style="width:95%; height: 28px; border: 1px solid #e6e6e6;"><option value="" selected="selected">请选择</option><option value="0">男</option><option value="1">女</option></select>';
newTd4.innerHTML = '<input type="text" name="ages" id="' + ages + '" maxlength="100" style="width: 90%; height: 22px; border: 1px solid #e6e6e6;"/>';
newTd5.innerHTML = '<input type="text" name="address_s" id="' + address_s + '" maxlength="100" style="width: 90%; height: 22px; border: 1px solid #e6e6e6;"/>';
}
function delRow(tableId) {
var tab=document.getElementById(tableId);
var tabRows=tab.rows;
//0为表头那一行（即：第1行为表头，从第2行开始新增），所以i=2-1，可根据自身实际情况更改（从第x行开始新增需把1改为：x-1）
for(var i=1; i<tabRows.length; i++){
var bx = tabRows[i].cells[0].childNodes[0];
if (bx.checked) {
tab.deleteRow(i);
i = i - 1;
}
}
//删除行后重新排列序号，若不需要可以注释
reTable(tableId);
}
//删除行后重新排列序号(见图)
function reTable(tableId) {
var tabid = document.getElementById(tableId);
//0为表头那一行（即：第1行为表头，从第2行开始新增），所以i=2-1，可根据自身实际情况更改（从第x行开始新增需把1改为：x-1）
for (var i = 1; i < tabid.rows.length; i++) {
tabid.rows[i].cells[1].innerHTML = i;//若不是从第1行开始动态增加，i需+/-（例：若无表头，从第1行就开始新增（此时var i=0），则为：i+1；从第3行开始增加（此时var i=2），则为i-1;第4行...i-2,以此类推）
}
}
//表格验证
function checkTable(tableId) {
//找到table
var tab = document.getElementById(tableId);
//获取table现有行数
var len = tab.rows.length;
if(len <= 1){//若只有表头一行
//alert("至少填写一条数据！");//根据自身需求是否需要
return false;
}
var message = "";//错误信息
//0为表头那一行（即：第1行为表头，从第2行开始新增），所以i=2-1，可根据自身实际情况更改（从第x行开始新增需把1改为：x-1）
for(var i = 1; i < len; i++){
//若用了jQuery可以这么写，这里用纯js，所以不用
//var name = $(tab.rows[i]).find("[name='names']").val();
var name = document.getElementById("name"+i).value;
var sexs = document.getElementById("sex"+i);
var index = sexs.selectedIndex;
var sex = sexs.options[index].value;
var age = document.getElementById("age"+i).value;
var address = document.getElementById("address"+i).value;
//验证是否有值
var msg = '';
if (name == '') {
msg += '姓名、';
}
if (sex == '') {
msg += '性别、';
}
if (age == '') {
msg += '年龄、';
}
if (address == '') {
msg += '地址、';
}
if(msg != ''){
message += '【XXX表】第' + i + '行，' + msg.substring(0, msg.length - 1) + "不能为空！\r\n";
}
}
if(message != ''){
alert(message);
}
}
下面代码放到body里面
<div style="float:right; margin-right : 2%;">
<input type="button" onclick="addRow('test')" value="增加" />
<input type="button" onclick="delRow('test');" value="删除" />
</div>
<table id="test" style="width: 100%;">
<tr>
<th style="width: 5%;text-align: center;">选项</th>
<th style="width: 5%;text-align: center;">序号</th>
<th style="width: 20%;text-align: center;">姓名</th>
<th style="width: 15%;text-align: center;">性别</th>
<th style="width: 15%;text-align: center;">年龄</th>
<th style="width: 40%;text-align: center;">地址</th>
</tr>
</table>