纯JS table动态增加行_js table 添加行

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("保存成功");
}

CSS：

.header {
	line-height: 34px;
    background-color: #f2f2f2;
    color: #666;
}
 
.button{
	width: 60px;
    height: 28px;
    background-color: #f2f0f0;
    border-radius: 8%;
}

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行其余数据不变）：

【保存】校验效果：