码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-15 12:48:18      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:++   name   搜索   val   one   var   cli   tag   else   

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

不说废话,直接上代码。

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

 

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

标签:++   name   搜索   val   one   var   cli   tag   else   

原文地址:https://www.cnblogs.com/wangyanei2017/p/9186335.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!