js动态创建table表格和删除指定行列代码实例
本章节分享一段代码实例，它实现了动态创建table表格和删除指定行列的效果。
虽然外观比较粗陋，但是这不是重点，这里介绍的是如何实现指定功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
//动态创建表格
function createTable() {
var divMain = document.getElementById("divMain");
removeAllChild(divMain);
var myTable = document.createElement("table");
myTable.id = "DynamicTable";
var myRow = document.getElementById("myRow").value;
var myCol = document.getElementById("myCol").value;
var trNode;
var tdNode;
var strTmp;
for (var index = 1; index <= myRow; index++) {
trNode = myTable.insertRow(-1);
for (var j = 1; j <= myCol; j++) {
strTmp ="第"+ index + "行,第"+ j + "列";
tdNode = trNode.insertCell(-1);
tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
}
}
divMain.appendChild(myTable);
}
function removeAllChild(nodeObj) {
while (nodeObj.hasChildNodes()) {
nodeObj.removeChild(nodeObj.firstChild);
}
}
function DeleteRow() {
var rowNum = document.getElementById("delRow").value;
var tbl = document.getElementById("DynamicTable");
if (tbl == null) {
alert('请先创建表格');
return;
}
if ((rowNum <= tbl.rows.length) && (rowNum > 0)) {
tbl.deleteRow(rowNum-1);
}
else {
alert('请输入一个有效的行!');
}
}
//删除列
function DeleteCol() {
var colNum = document.getElementById("delCol").value;
var tbl = document.getElementById("DynamicTable");
if (tbl == null) {
alert('请先创建表格');
return;
}
if(tbl.rows.length<=0) {
alert('表格不存在行');
return;
}
if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
for (var index = 0; index < tbl.rows.length; index++) {
tbl.rows[index].deleteCell(colNum - 1);
}
}
else {
alert('指定列不存在');
}
}
window.onload=function(){
var createTb=document.getElementById("createTb");
var delRowBt=document.getElementById("delRowBt");
var delColBt=document.getElementById("delColBt");
createTb.onclick=function(){createTable()}
delRowBt.onclick=function(){DeleteRow()}
delColBt.onclick=function(){DeleteCol()}
}
</script>
</head>
<body>
请输入行数:<input type="text" id="myRow" />请输入列数:<input type="text" id="myCol"/><br/>
<input type="button" id="createTb" value="创建表格"/><br/>
<input type="text" id="delRow" /><input id="delRowBt" type="button" value="删除行"/><br/>
<input type="text" id="delCol" /><input id="delColBt" type="button" value="删除列"/><br/>
<div id="divMain"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.function createTable(){}，此函数实现动态创建表格的效果。
（2）.var divMain = document.getElementById("divMain")，获取指定的元素对象，里面存放的就是创建的table。
（3）.removeAllChild(divMain)，删除div元素下所有的子元素，其实就是创建表格之前先清空原来的表格。
（4）.var myTable = document.createElement("table"),创建一个table表格元素对象。
（5）.myTable.id = "DynamicTable"，为元素创建id属性并赋值。
（6）.var myRow = document.getElementById("myRow").value，将要创建表格的行数。
（7）.var myCol = document.getElementById("myCol").value,将要创建表格的列数。
（8）.var trNode，用来存储tr元素节点。
（9）.var tdNode，用来存储td元素节点。
（10）.var strTmp，用来暂时存储td单元格中的内容。
（11）.for (var index = 1; index <= myRow; index++) {}，使用for循环的方式创建指定的行。
（12）.trNode = myTable.insertRow(-1)，在表格的末尾追加一个tr行。
（13）.for (var j = 1; j <= myCol; j++) {
strTmp ="第"+ index + "行,第"+ j + "列";
tdNode = trNode.insertCell(-1);
tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
}，为tr行创建追加指定书目的单元格。
（14）.divMain.appendChild(myTable)，将table表格添加到div元素。
（15）.function removeAllChild(nodeObj) {
while (nodeObj.hasChildNodes()) {
nodeObj.removeChild(nodeObj.firstChild);
}
}删除元素下所有的子元素节点。
（16）.function DeleteRow() {}，可以实现删除行的操作。
（17）.var rowNum = document.getElementById("delRow").value，获取要删除的行。
（18）.var tbl = document.getElementById("DynamicTable")，获取创建的表格元素对象。
（19）.if (tbl == null) {
alert('请先创建表格');
return;
}，如果不存在表格，那么就弹出提示，并跳出函数。
（20）.if(tbl.rows.length<=0) {
alert('表格不存在行');
return;
},如果不存在表格的行，那么弹出提示，并跳出函数。
（21）.if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
for (var index = 0; index < tbl.rows.length; index++) {
tbl.rows[index].deleteCell(colNum - 1);
}
}，执行删除行的操作。
二.相关阅读:
（1）.document.createElement()可以参阅document.createElement()一章节。
（2）.insertRow()可以参阅js insertRow()一章节。
（3）.insertCell()可以参阅js insertCell()一章节。
（4）.innerHTML属性可以参阅js innerHTML一章节。
（5）.appendChild()方法可以参阅js appendChild()一章节。
（6）.hasChildNodes()可以参阅javascript hasChildNodes()一章节。
（7）.removeChild()方法可以参阅js removeChild()一章节。
（8）.firstChild可以参阅javascript firstChild一章节。
（9）.rows属性可以参阅js rows一章节。
（10）.deleteRow()可以参阅js deleteRow()一章节。