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" style="width: 16px; height: 28px; border: 1px solid #e6e6e6;" />';
newTd1.innerHTML = i-1; //序号 （新增前有x个tr就-x，例：若只有表头一行（一个tr），则：-1）
newTd2.innerHTML = '<input type="text" name="names" id="' + names + '" maxlength="100" style="width: 95%; height: 28px; border: 1px solid #e6e6e6;"/>';
newTd3.innerHTML = '<select name="sexs" id="' + 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: 95%; height: 28px; border: 1px solid #e6e6e6;"/>';
newTd5.innerHTML = '<input type="text" name="address_s" id="' + address_s + '" maxlength="100" style="width: 95%; height: 28px; 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);
        return false;
    }
    alert("保存成功");
}

JSP代码：样式根据自己的需求来

<div style="float:right; margin-right : 2%;">
<input type="button" onclick="addRow('test')" value="增加" class="button" />
<input type="button" onclick="delRow('test');" value="删除" class="button" />
<input type="button" onclick="checkTable('test')" value="保存" class="button" />
</div>
<div style="padding-top: 36px;">
<table id="test" border="1" cellspacing="0" style="width: 100%;">
<tr class="header">
<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>
</div>

效果图：

添加10行

调用reTable(tableId) 删除第2、4、6、8行效果（仅序号改变，重新排序，第1、3、5、7、9、10行其余数据不变）：

不调用reTable(tableId) 删除第2、4、6、8行效果（序号未重新排序，第1、3、5、7、9、10行其余数据不变）：

【保存】校验效果：

转载：https://blog.csdn.net/Everyone_boy/article/details/119841290