0%

Javascript 动态添加删除表格元素

下面的例子是通过监听点击事件,动态添加行,删除行、单元格。

        无标题文档
        
            function add(){
                var tr=document.getElementById("table").insertRow(0);//insertRow参数为插入后的行号,或者说插到这一行前面
                var data=new Array();//定义数组,数据放里面,每格创建一个TEXT节点
                data[0]=document.createTextNode("1");
                data[1]=document.createTextNode("2");
                data[2]=document.createTextNode("3");
                for(i=0;i<data.length;i++){//循环插入
                    td=tr.insertCell(i);//insertCell参数为列号
                    td.appendChild(data[i]);//绑定
                }
            }
            function remove(){
                var table=document.getElementById("table");
                table.deleteRow(0);//移除行,下面补齐
                table.rows[0].deleteCell(0);//移除单元格,后面的自动上前补齐
            }
        
    
    
        增加一行  删除一行
        
            
                
                    asdf
                
                
                    asfd
                
                
                    sfda
                
            
            
                
                    asdf
                
                
                    asfd
                
                
                    sfda
                
            
            
                
                    asdf
                
                
                    asfd
                
                
                    sfda