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

lizarbhc 2008-01-05 09:01:52

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

...全文

157 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

he_8134 2008-01-05

打赏
举报

我也来～～



<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>

Go 旅城通票 2008-01-05

打赏
举报

<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>

yixianggao 2008-01-05

打赏
举报

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="yixianggao@126.com" />

    <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>