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

Posted wangyanei2017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现对表格的动态添加行。相关的知识,希望对你有一定的参考价值。

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

不说废话,直接上代码。

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); //删除行
     }

 












































以上是关于实现对表格的动态添加行。的主要内容,如果未能解决你的问题,请参考以下文章

JS 动态表格(添加删除行)

如何jquery实现表格数据的动态添加与统计

JS实现表格Table动态添加删除行

element-UI table动态增加列,动态增加行,动态合并行。选择编辑表头行数据

jquery给表格动态添加删除行后如何获取数据

使用jquery动态添加表格的行之后,如何获取表格高度?