自定义表格table的列数,实现增减表格行数

    <form id="ff" method="post" action="">
            <table id="ta" cellpadding="0" cellspacing="0" border="1"> 
                <tr >
                <td align="center">序号</td>
                <td align="center" style="width:40px">药材名称</td>
                  <td align="center" style="width:40px">药材贴量(g)</td>
                  <td align="center">操作</td>
                </tr>
                <tr id="tr1">
                <td>1</td>
                <td><input id="t1_1"name='Mad_name'  οnmοuseοver='this.style.backgroundColor=#6298E1;this.style.color=#000000;' οnmοuseοut='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />
                </td>
                <td><input id="t1_2" name='ts'  οnmοuseοver='this.style.backgroundColor=#6298E1;this.style.color=#000000;' οnmοuseοut='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />
                </td>
                <td>&nbsp;
                </td>
                </tr>
               </table>
             </form>

 

 

function Addrows(){
        var tab=document.getElementById("ta");
        //添加行
        var newTR = tab.insertRow(tab.rows.length);
        //获取序号=行索引
        var  xuhao=newTR.rowIndex.toString();
    
        //添加列:序号
        var newNameTD=newTR.insertCell(0);
        newTR.id = "tr" + xuhao;
        //添加列内容
        newNameTD.innerHTML = xuhao;
        //添加列:日期
        var newNameTD=newTR.insertCell(1);
        //添加列内容
        newNameTD.innerHTML = "<input name='name" + xuhao + "' id='t"+xuhao+"_1'   οnmοuseοver='this.style.backgroundColor=#6298E1;this.style.color=#000000;' οnmοuseοut='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />";

        //添加列:
        var ts=newTR.insertCell(2);
        //添加列内容
        ts.innerHTML = "<input name='ts"  + "' id='t"+xuhao+"_2'    οnmοuseοver='this.style.backgroundColor=#6298E1;this.style.color=#000000;' οnmοuseοut='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />";
       

        //添加列:删除按钮
        var newDeleteTD=newTR.insertCell(3);
        //添加列内容

        newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' οnclick=\"deltr('tr" + xuhao + "')\">删除</a></div>";
            
     }

function deltr(trid)
    {    alert(trid);
        var tab=document.getElementById("ta");
        var row=document.getElementById(trid);   
        var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始  
        tab.deleteRow(index);  //从table中删除

        //重新排列序号,如果没有序号,这一步省略
        var nextid;
        for(i=index;i<tab.rows.length;i++){
            tab.rows[i].cells[0].innerHTML = i.toString();
            nextid=i+1;
            mark=document.getElementById("tr"+nextid);
            mark.id="tr"+i;
            var input1=document.getElementById("t"+i+"_1");
            input1.id="t"+nextid+"_1";
            var input2=document.getElementById("t"+i+"_2");
            input2.id="t"+nextid+"_2"
        }
    }
    

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值