本文主要是介绍js动态新增/删除table表的行和列，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
亲测兼容谷歌，360，火狐，IE8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript删除行和列</title><script language="javascript" type="text/javascript">function findObj(theObj, theDoc) {var p, i, foundObj;if (!theDoc) theDoc = document;if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);}if (!(foundObj = theDoc[theObj]) && theDoc.all)foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);if (!foundObj && document.getElementById)foundObj = document.getElementById(theObj); return foundObj;}//添加一个列count = 1;function AddNewColumn() {var txtTDLastIndex = findObj("txtTDLastIndex", document);var columnID = parseInt(txtTDLastIndex.value);var tab = document.getElementById("tab");var rowLength = tab.rows.length;var columnLength = tab.rows[1].cells.length;for (var i = 0; i < rowLength; i++) {if (i == 0) {var oTd = tab.rows[0].insertCell(columnLength);oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' οnclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";} else if (i == 1) {//第一列:序号var oTd = tab.rows[1].insertCell(columnLength);oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";} else if (i > 1) {var oTd = tab.rows[i].insertCell(columnLength);oTd.id = "column" + columnID;oTd.innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";}}}//添加一个行var index = 1;function AddNewRow() {var txtTRLastIndex = findObj("txtTRLastIndex", document);var rowID = parseInt(txtTRLastIndex.value);var tab = findObj("tab", document);var columnLength = tab.rows[0].cells.length;//添加行var newTR = tab.insertRow(tab.rows.length);newTR.id = "SignItem" + rowID;for (var i = 0; i < columnLength; i++) {if (i == 0) {//第一列:序号newTR.insertCell(0).innerHTML = ++index;} else if (i > 0 && i < 4) {newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";}else if (i >= 4) {newTR.insertCell(i).innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";}}//添加列:删除按钮var lastTd = newTR.insertCell(columnLength);lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' οnclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";//将行号推进下一行txtTRLastIndex.value = (rowID + 1).toString();}//删除指定行function DeleteSignRow(rowid) {var tab = findObj("tab", document);var signItem = findObj(rowid, document);//获取将要删除的行的Indexvar rowIndex = signItem.rowIndex;//删除指定Index的行tab.deleteRow(rowIndex);//重新排列序号，如果没有序号，这一步省略for (i = 2; i < tab.rows.length; i++) {tab.rows[i].cells[0].innerHTML = i - 1;}--index}//删除指定列function DeleteSignColumn(columnId) {var tab = document.getElementById("tab");var columnLength = tab.rows[1].cells.length;//删除指定单元格 for (var i = 0; i < tab.rows.length; i++) {tab.rows[i].deleteCell(columnId);}//重新排列序号，如果没有序号，这一步省略var column = columnLength - 4;for (var j = 1; j < column; j++) {tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";}--count;}//清空列表function ClearAllSign() {//if (confirm('确定要清空所有吗？')) {index = 0;var tab = findObj("tab", document);var rowscount = tab.rows.length;//循环删除行,从最后一行往前删除for (i = rowscount - 1; i > 1; i--) {tab.deleteRow(i);}//重置最后行号为1var txtTRLastIndex = findObj("txtTRLastIndex", document);txtTRLastIndex.value = "1";//预添加一行AddNewRow();//}}</script>
<style>
table *{border:1px red solid;}
</style>
</head>
<body>
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;"><table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"style="text-align: center"><tr id="tr1"><td></td><td></td><td></td><td></td><td></td></tr><tr id="trHeader"><td style="background: #D3E6FE">NO</td><td style="background: #D3E6FE">试验项目</td><td style="background: #D3E6FE">检验项目</td><td style="background: #D3E6FE">标准</td><td style="background: #D3E6FE">1</td></tr><tr><td>1</td><td><input id='textItem0' type='text' style="border: 0px" size='12' /></td><td><input id='checkItem0' type='text' style="border: 0px" size='12' /></td><td><input id='stand0' type='text' style="border: 0px" size='12' /></td><td><textarea rows="4" id="" style="width: 150px; height: 40px;"></textarea></td></tr></table><table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center"><tr><td style="background: #D3E6FE"></td><td style="background: #D3E6FE"><input type="button" name="Submit" value="新增行" οnclick="AddNewRow()" /></td><td style="background: #D3E6FE"><input type="button" name="Submit" value="新增列" οnclick="AddNewColumn()" /></td><td style="background: #D3E6FE"><input type="button" name="Submit2" value="全部清空" οnclick="ClearAllSign()" /></td><td style="background: #D3E6FE"><input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /><input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" /></td></tr></table></div>
</body>
</html>效果图为：
结果为:
这篇关于js动态新增/删除table表的行和列的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
