实现对表格的动态添加行。

Posted 2020-11-18 wangyanei2017

由于业务需求需要让表格实现动态添加行数。于是通过在网上搜索各位大神的大作，完成此需求。

不说废话，直接上代码。

function addyjTable(){
        var tab=document.getElementById("table"); //获得表格
        var colsNum=tab.rows.item(0).cells.length; //表格的列数
        //表格当前的行数
        var num=document.getElementById("table").rows.length;
        var rownum=num;
        tab.insertRow(rownum);
        for(var i=0;i<7; i++){
                tab.rows[rownum].insertCell(i);//插入列
                if(i==0){
                tab.rows[rownum].cells[i].style.display = "none";
                tab.rows[rownum].cells[i].innerhtml=
                ‘<div  style="display: none" ><input  type="text" name="fybh" value="<s:property value=‘fybhs‘/>"/></div>‘;
                }else if(i==1){
                tab.rows[rownum].cells[i].innerHTML=
                ‘<textarea class="comments" id="yjmc"></textarea>‘;
                }else if(i==2){
                tab.rows[rownum].cells[i].innerHTML=‘<textarea class="comments" id="pzyq"> </textarea>‘;
                }else if(i==3){
                tab.rows[rownum].cells[i].innerHTML=‘<input type="text" class="text-areas" name="dw" value="wk"/>‘;
                }else if(i==4){
                tab.rows[rownum].cells[i].innerHTML=‘<input type="text" class="text-areas" name="dj"/>‘;
                }
                else if(i==5){
                tab.rows[rownum].cells[i].innerHTML=‘<input type="text" class="text-areas" name="sl"/>‘;
                }
                else{
                tab.rows[rownum].cells[i].innerHTML=‘<input type="text" class="text-areas" name="zje" />‘;
                }
            }
            tab.rows[rownum].insertCell(i);
            tab.rows[rownum].cells[i].innerHTML=‘<a onclick="delRow(this)">删除行</a>‘;
        }



function delRow(obj){
        var Row=obj.parentNode; //tr
        while(Row.tagName.toLowerCase()!="tr"){
            Row=Row.parentNode;
        }
        
        Row.parentNode.removeChild(Row); //删除行
     }