添加删除table里的行

要删除某行一定要知道那行的rowIndex;

解决方案 »

  1.   

    <html>
    <script>window.onload=init;
    function init(){
        var cb = document.getElementById("cb");
        cb.TR=document.getElementById("theTR");
        cb.onclick=theCheckBoxEvent;
    }function theCheckBoxEvent(){
        if(this.checked==false){
            deleARow(this.TR);
        }
    }function deleARow(tr){
        tr.parentElement.removeChild(tr);
    }
    </script>
    <body>
    <table id="tab">
    <tr id="theTR" ><td><input type="checkbox" id="cb" checked /></td></tr>
    </table>
    </body>
    </html>
      

  2.   

    lz请看清楚我的代码,需要知道在哪行吗?cb.TR=document.getElementById("theTR");反正你要在创建的时候知道哪行就行了
    cb.TR=...你创建的时候哪行
      

  3.   

    给个完整的代码你<html>
    <script>
    alert()
    window.onload=init;
    function init(){
        window.table=document.getElementById("tab");
        window.tbody=document.createElement("tbody");
        table.appendChild(tbody);
        addARow();
    }
    function createCheckBox(tr){
        var cb = document.createElement("input");
        cb.type="checkbox";
        cb.onclick= theCheckBoxEvent;
        cb.TR=tr;
        return cb;
    }
    function theCheckBoxEvent(){
        if(this.checked){
           addARow();
        }else{
            deleARow(this.TR);
        }
    }
    function addARow(){
        var tr=document.createElement("tr");
        var td1=document.createElement("td");
        td1.innerHTML="本行创建时间:"+new Date();
        var td2=document.createElement("td");
        var cb=createCheckBox(tr);
        td2.appendChild(cb);
        tr.appendChild(td1);
        tr.appendChild(td2);
        window.tbody.appendChild(tr);
    }
    function deleARow(tr){
        tr.parentElement.removeChild(tr);
    }
    </script><body>
    <table id="tab">
    </table>
    </body>
    </html>
      

  4.   

    非常感谢楼上的。
    再问一下，是不是加了window.tbody.appendChild(tr);这句，才能在页面上显示出来？
      

  5.   

    <html>
    <head></head>
    <script language="javascript">
    function process3(a,b){
    newTrr = document.createElement("tr");
    newTrr.id="d";
    newTdd = document.createElement("td");
    testTb.appendChild(newTrr);
    newTrr.appendChild(newTdd);
    newTdd.innerText="ddddd";
    }
    </script>
    <form name="form1">
    <input type="button" value="add" onClick="return process3('01','05');">
    <table id="testTb">
    <tr>
    <td><input type="checkbox">iuehdidjd</td>
    </tr>
    </table>
    </form>
    </body>
    </html>为什么在页面上显示不出“ddddd”呢？
      

  6.   

    tr行的上一级是一个tbody~~不是table~~<html>
    <head></head>
    <script language="javascript">
    function process3(a,b){
    newTrr = document.createElement("tr");
    newTrr.id="d";
    newTdd = document.createElement("td");
    tbody.appendChild(newTrr);
    newTrr.appendChild(newTdd);
    newTdd.innerText="ddddd";
    }
    </script>
    <form name="form1">
    <input type="button" value="add" onClick="return process3('01','05');">
    <table id="testTb">
    <tbody id="tbody">
    <tr>
    <td><input type="checkbox">iuehdidjd</td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    </html>
      

  7.   

    用appendChild()方式增加表格行必须使用tbody元素
    用insertRow()就不用~~~