弱弱地问下,如何删除选中的行

这是一个增加行,和删除行的代码,我做了稍微的改动...
现在我想删除选中框的行...但是遇到了麻烦...请大虾指点...谢谢...
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<title>无标题文档</title>
<style type="text/css">
body{background:#FFFFFF;}
</style>
<script type="text/javascript">
var i =0;
function add(){
 var oTr = document.getElementById("addtr").rows[1];
 var newTr = oTr.cloneNode(true);
 document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
}function deleteline(){
  i = document.all("addtr").rows.length;
while(i >2){ 
    //if(document.all("addtr").getElementsByID("del").checked==true){ //这里要如何书写的好呢?我试了好久都不可以...谢谢...
   document.all("addtr").deleteRow(i-1); 
    //} 
   i--; 
}  
}</script>
</head>
<body>
<input type="button" id="b1" value="Add Line" onclick="add()" />
<input type="button" id="b2" value="Delete Line" onclick="deleteline()" />
<table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
  <tr>
    <td align="center" bgcolor="#CCCCCC">AA </td>
    <td align="center" bgcolor="#CCCCCC">BB</td>
    <td align="center" bgcolor="#CCCCCC">CC</td>
    <td align="center" bgcolor="#CCCCCC">DD</td>
    <td align="center" bgcolor="#CCCCCC">EE</td>
    <td align="center" bgcolor="#CCCCCC">FF</td>
    <td align="center" bgcolor="#CCCCCC">GG</td>
    <td align="center" bgcolor="#CCCCCC">HH</td>
    <td align="center" bgcolor="#CCCCCC">DEL</td>
  </tr>
  <tr>
    <td align="center"><input size="10" type="text" name="a" /></td>
    <td align="center"><input size="10" type="text" name="b"  /></td>
    <td align="center" height="20">
       <select name="c" >
   <option value="-1" selected="selected">Please select</option></select></td>
    <td align="center"><input size="10" type="text" name="c" /></td>
    <td align="center"><input type="checkbox" name="d"/></td>
    <td align="center"><input type="checkbox" name="e"/></td>
    <td align="center"><input size="10" type="text" name="f" /></td>
    <td align="center"><input size="10" type="text" name="g" /></td>
    <td align="center"><input type="checkbox" name="del" id="del"/></td>  
    //就是在这里,如果我勾选了它,就是要删除的
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    取checkbox的父节点的父节点。然后删除就行了。
      

  2.   

    function deleteline(){ 
      
      
    for(var i=document.getElementsByName("del").length-1;i>=0;i--) {
    if(document.getElementsByName("del")[i].checked==true){ //这里要如何书写的好呢?我试了好久都不可以...谢谢... 
    //alert(document.getElementsByName("del")[i].parentNode.parentNode.rowIndex);
    document.all("addtr").deleteRow(document.getElementsByName("del")[i].parentNode.parentNode.rowIndex);  } 
    }
    } 这样可以实现，lz要注意只能从最下面开始删起 因为从最上面的话rowindex会一直在变的。。
      

  3.   

    能实现选择删除功能，但不能删除最后一行，否则添加不了
    LZ自己改改吧<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档 </title>
    <style type="text/css">
    body{background:#FFFFFF;}
    </style>
    <script type="text/javascript">
    var i =0;
    function add(){
    var oTr = document.getElementById("addtr").rows[1];
    var newTr = oTr.cloneNode(true);
    document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
    }function deleteline(){
        var oTable = document.getElementById("addtr");
        var checkedTr = document.getElementsByName("del");
    var delIndex = "";
    for(var i = 0; i< checkedTr.length ; i++){
    if(checkedTr[i].checked){
        delIndex += i+1+",";
    }
    }
    var delTrs = delIndex.split(",");
    var num = 0;
    for(var t = 0 ; t< delTrs.length -1 ;t++){
       if(oTable.rows.length == 2){
      alert("can not delete last row ");
      break;
       }
       if(delTrs[t] != ""){
    oTable.deleteRow(parseInt(delTrs[t])-num++);
       }
    }
    }</script>
    </head>
    <body>
    <input type="button" id="b1" value="Add Line" onclick="add()" />
    <input type="button" id="b2" value="Delete Line" onclick="deleteline()" />
    <table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
      <tr id="trId">
        <td align="center" bgcolor="#CCCCCC">AA </td>
        <td align="center" bgcolor="#CCCCCC">BB </td>
        <td align="center" bgcolor="#CCCCCC">CC </td>
        <td align="center" bgcolor="#CCCCCC">DD </td>
        <td align="center" bgcolor="#CCCCCC">EE </td>
        <td align="center" bgcolor="#CCCCCC">FF </td>
        <td align="center" bgcolor="#CCCCCC">GG </td>
        <td align="center" bgcolor="#CCCCCC">HH </td>
        <td align="center" bgcolor="#CCCCCC">DEL </td>
      </tr>
      <tr>
        <td align="center"> <input size="10" type="text" name="a" /> </td>
        <td align="center"> <input size="10" type="text" name="b"  /> </td>
        <td align="center" height="20">
         <select name="c" >
         <option value="-1" selected="selected">Please select </option> </select> </td>
        <td align="center"> <input size="10" type="text" name="c" /> </td>
        <td align="center"> <input type="checkbox" name="d"/> </td>
        <td align="center"> <input type="checkbox" name="e"/> </td>
        <td align="center"> <input size="10" type="text" name="f" /> </td>
        <td align="center"> <input size="10" type="text" name="g" /> </td>
        <td align="center"> <input type="checkbox" name="del" id="del"/> </td> 
      </tr>
    </table>
    </body>
    </html>
      

  4.   

    改了一下可以删除第一行了
    但不是真正的删除，是不显示<script type="text/javascript">
    function add(){
    var oTable = document.getElementById("addtr");
    var oTr = document.getElementById("addtr").rows[1];
    if(oTable.rows.length == 2 && oTr.style.display == "none"){
    oTr.style.display = "";
    }else {
    var newTr = oTr.cloneNode(true);
    document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
    }
    }function deleteline(){
        var oTable = document.getElementById("addtr");
        var checkedTr = document.getElementsByName("del");
    var delIndex = "";
    for(var i = 0; i< checkedTr.length ; i++){
    if(checkedTr[i].checked){
        delIndex += i+1+",";
    }
    }
    var delTrs = delIndex.split(",");
    var num = 0;
    for(var t = 0 ; t< delTrs.length -1 ;t++){
       if(oTable.rows.length == 2){
      checkedTr[0].checked = false;
          oTable.rows[1].style.display = "none";
      break;
       }
       if(delTrs[t] != ""){
    oTable.deleteRow(parseInt(delTrs[t])-num++);
       }
    }
    }
    </script>