js 动态生成和删除表格

js DOM 实现动态生成和删除表格

html页面，建一个table标签，注意必须是table或tbody标签，div标签无效

动态生成和删除表格<button onclick="insertTable()">添加表</button><button  onclick="deleteTable()">删除表</button>
<table id="my_table">
</table>

js代码

//添加表
function insertTable() {
deleteTable();//删除旧表
var tabNode = document.getElementById("my_table");
for(var i=0;i<4;i++){
var trNode = tabNode.insertRow();
if(i==0){
for(var j=0;j<4;j++){
var tdNode=trNode.insertCell();
var text="";
if(j==0){
text="编号";
}else if(j==1){
text="姓名";
}else if(j==2){
text="年龄";
}else if(j==3){
text="性别";
}
tdNode.innerHTML=text;
}
}else{
for(var j=0;j<4;j++){
var tdNode=trNode.insertCell();
var text="";
if(j==0){
text=i+1;
}else if(j==1){
text="jxy";
}else if(j==2){
text="18";
}else if(j==3){
text="男";
}
tdNode.innerHTML=text;
}
}
}
}

//删除表
function deleteTable() {
var tb = document.getElementById("my_table");
var rowNum=tb.rows.length;
for (i=0;i<rowNum;i++)
{
tb.deleteRow(i);
rowNum=rowNum-1;
i=i-1;
}
}

表里的数据是我随便写的，在运用到程序时，要用ajax和json获得数组数据写入表中