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获得数组数据写入表中