javascript 如何一次删除table的多个tr？

table里有多个tr，每行都有checkbox，根据选中的checkbox来删除这行。我试了下似乎只删除找到的第一行，无发一次性删除所有选中的行。如何解决？

解决方案 »

  1.   

    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>dhtml.table.removeMutipleRows.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
    </head>
    <body>
        <table border="1" id="tbeTarget">
            <tr>
                <td><input type="checkbox" id="" /></td>
                <td>1</td>
                <td>a</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="" /></td>
                <td>2</td>
                <td>b</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="" /></td>
                <td>3</td>
                <td>d</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="" /></td>
                <td>4</td>
                <td>d</td>
            </tr>
        </table>
        <input type="button" id="btnRemove" value="Remove" />
        <script type="text/javascript">
        <!--
    var oTable = document.getElementById("tbeTarget");
    var oBtn = document.getElementById("btnRemove");
    oBtn.onclick = function()
    {
        var oRow;
        for (var i=oTable.rows.length-1; i>=0; i--)
        {
            oRow = oTable.rows[i];        if (oRow.firstChild.firstChild.checked)
            {
                oTable.deleteRow(i);
            }
        }
    };    //-->
        </script>
    </body>
    </html>
      

  2.   

    <html> 
    <head> 
    <title>Selected</title> 
    <script   language="javascript">
    function Delete()
    {
      var tb=document.getElementById("tb");
      //注意变量i的控制
      for(var i=0;i<tb.rows.length;)
      {
         var tr=tb.rows[i];
         if(tr.cells[0].firstChild.checked)
         {
            tr.removeNode(true);
            i=0;
         }
         else 
           i++;
      }
    }
    </script> 
    </head> 
    <body> 
    <input type="button" value="Delete" onclick="Delete()"/>
    <table width="50%" id="tb" border="1" cellpadding="0" cellspacing="1" >
      <tr>
        <td><input type='checkbox'/>1</td>
      </tr>
      <tr>
        <td><input type='checkbox'/>2</td>
      </tr>
      <tr>
        <td><input type='checkbox'/>3</td>
      </tr>
      <tr>
        <td><input type='checkbox'/>4</td>
      </tr>
    </table></body> 
    </html> 
      

  3.   

    我也来～～<table id="tab">
    <tr><td><input type="checkbox" /><td></tr>
    <tr><td><input type="checkbox" /><td></tr>
    <tr><td><input type="checkbox" /><td></tr>
    <tr><td><input type="checkbox" /><td></tr>
    </table>
    <input type="button" onclick="deleteTr()" value="删除选中行" /><script>
    function deleteTr(){
        var tab=document.getElementById("tab");
        var deleTr=[];
        for(var i=0;i<tab.rows.length;i++){
            var tr=tab.rows[i];
            var inputs=tr.getElementsByTagName("input");
            for(var ii=0,jj=inputs.length;ii<jj;ii++){
                var cb=inputs[ii];
                if(cb.type=="checkbox"&&cb.checked==true){
                    deleTr.push(tr);break;
                }
            }
        }
        for(var i=0;i<deleTr.length;i++){
            var tr=deleTr[i];
            tr.parentNode.removeChild(tr);
        }
    }
    </script>