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

时间:2024-03-18 14:09:39

    <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'  onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />
                </td>
                <td><input id="t1_2" name='ts'  onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />
                </td>
                <td>&nbsp;
                </td>
                </tr>
               </table>
             </form>自定义表格table的列数,实现增减表格行数

 

 

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'   onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />";

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

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

        newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"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"
        }
    }