问答详情
源自：9-22 编程练习

大神们帮我看看，这个表格全选和删除是什么问题呢？

问题描述：

1、复制或新添加的行点击删除能成功删除，但直接删除原始的xh001和xh002行就不能成功；

2、通过“添加一行”新增表格，当新增的数量大于5行后，点击“全选”按钮不能全部选中，“取消”按钮也不能生效；


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


</head>

<style type="text/css">

* {

font-family: "微软雅黑";

font-size: 12px

}

input, th, td {

font-family: "微软雅黑";

font-size: 12px

}

td, input {

text-align: center;

}

a:link {

color: #F00;

}



</style>

<script type="text/javascript"> 


       // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

        window.onload = function(){

        var tbody = document.getElementById('myTable').lastChild;

trs = tbody.getElementsByTagName('tr');   

for(var i =1;i<trs.length;i++){

trs[i].onmouseover = function(){

this.style.backgroundColor ="#f2de76";

} 

trs[i].onmouseout = function(){

this.style.backgroundColor ="#fff";

} 

} 

    }


      //增加行函数

     function addNode(){

   

 var table=document.getElementById("myTable");

 var newtr=document.createElement("tr");

 

  //新增选框

 var newtd0=document.createElement("td");

 newtd0.innerHTML="<input type='checkbox' name='checkbox' />";

 newtr.appendChild(newtd0);

 

 //新增学号

 var newtd1=document.createElement("td");

 newtd1.innerHTML="<input name='number' type='text'/>";    //var txt = document.createTextNode(document.getElementById("number1").value);

          //newtd1.appendChild(txt);

 newtr.appendChild(newtd1);

 

 //新增姓名

 var newtd2=document.createElement("td");

 newtd2.innerHTML="<input name='name' type='text' />";

 newtr.appendChild(newtd2);

 

 //新增性别

 var newtd3=document.createElement("td");

 newtd3.innerHTML="<input name='sex' type='text' >";  

 newtr.appendChild(newtd3);

 

 //新增删除选项

 var newtd4=document.createElement("td");

 newtd4.innerHTML="<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";

 newtr.appendChild(newtd4);

 

 //新增性别  

 table.appendChild(newtr);

 

 //获取输入框的值，并传递给新增行

 var number=document.getElementById("number1");

 var numberS=document.getElementsByName("number");

 numberS[numberS.length-1].value=number.value;

     

 var name=document.getElementById("name1");

 var nameS=document.getElementsByName("name");

 nameS[nameS.length-1].value=name.value;

 

 var sex=document.getElementById("sex1");

 var sexS=document.getElementsByName("sex");

 sexS[sexS.length-1].value=sex.value;    

 }     

 

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

 //复制行函数

 function copyRow(){

      var myTable = document.getElementById("myTable");

      var selectBox = myTable.getElementsByTagName("input");

      for(var i=0; i<selectBox.length; i++){

          if(selectBox[i].checked){

             var newTr = myTable.rows[i].cloneNode(true);

             newTr.getElementsByTagName("input")[0].checked = false;//克隆后勾选必须取消，否则反复复制形成死循环，selectBox.length是变化的

             myTable.appendChild(newTr);

            }

      }

for(var i=0; i<myTable.rows.length; i++){

myTable.rows[i].getElementsByTagName("input")[0].checked = false;}//复制后取消选择状态

   }     

 

   //复制行全选

 function selectAll(){

var myTable = document.getElementById("myTable");

      var selectBox = myTable.getElementsByTagName("input");

      for(var i=1; i<selectBox.length; i++){

          if(!selectBox[i].checked){

             myTable.rows[i].getElementsByTagName("input")[0].checked = true;

            

            }

        }

 } 

   

 //复制行取消

 function cancelAll(){

var myTable = document.getElementById("myTable");

      var selectBox = myTable.getElementsByTagName("input");

      for(var i=1; i<selectBox.length; i++){

          if(selectBox[i].checked){

             myTable.rows[i].getElementsByTagName("input")[0].checked = false;

            

            }

        }

 } 

 

     // 创建删除函数

     

 function deleteRow(obj){

   var tbody = document.getElementById('myTable');  

var tr = obj.parentNode.parentNode;

var con=confirm("你确定删除此行吗");

if(con){

tbody.removeChild(tr);}

}  

 function selectDel(){

var con=confirm("你确定删除此行吗");

      var tbody = document.getElementById('myTable');

      var selectBox = myTable.getElementsByTagName("input");

      for(var i=selectBox.length-1; i>=0; i--){

var tr = selectBox[i].parentNode.parentNode;

        if(selectBox[i].checked && con){

        tbody.removeChild(tr);

            }

        }

  }

  

  

 // 重置表格函数

 function Refresh(){

var con=confirm("你确定重置表格吗");

        if(con){

        location.reload();           

        }   

  

  }

  </script>

  

</head>

<body>

<input type="button" value="添加一行"   onclick="addNode()"/>

<!--在添加按钮上添加点击事件  --> 

学号：<input id="number1" type="text" value="xh003"/>

姓名：<input id="name1" type="text" value="张小芳"/>

性别：<input id="sex1" type="text" value="女"/>

<input type="button" value="重置表格"  onclick="Refresh()"/>

<br></br>

<input type="button" value="复制表格"  onclick="copyRow()"/>

<input type="button" value="全选"  onclick="selectAll()"/>

<input type="button" value="取消"  onclick="cancelAll()"/>

<input type="button" value="选择删除"  onclick="selectDel()"/>


<table id="myTable" border="1px"  width="60%" bgcolor="#fff">

  <tr>

    <th width="30px"><input type="text" name="checkbox" value="选框"/></th>

    <th>学号</th>

    <th>姓名</th>

    <th>性别</th>

    <th>操作</th>

  </tr>

  <tr bgcolor="#fff" id="tr1" onmousemove="bgColor()">

    <td width="30px"><input type="checkbox" name="checkbox" /></td>

    <td>xh001</td>

    <td>王小明</td>

    <td>男</td>

    <td width="40px"><a href="javascript:;" onclick="deleteRow(this);">删除</a></td>

    <!--在删除按钮上添加点击事件  --> 

  </tr>

  <tr>

    <td width="30px"><input type="checkbox" name="checkbox" /></td>

    <td>xh002</td>

    <td>刘小芳</td>

    <td>女</td>

    <td width="40px"><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>

    <!--在删除按钮上添加点击事件  --> 

  </tr>

</table>

<br>

</br>

</body>

</html>



提问者：天涯蝶舞 2016-08-02 16:49

个回答

  • 水里有条鱼
    2016-08-02 20:31:12
    已采纳

    主要是要理解清楚table里面的层次结构，table中thead、tfoot、tbody这三个元素是依次出现的，虽然可能我们在编写代码的时候并没有定义这几个元素，但是浏览器会默认，因此不管是添加行还是删除行，都应该在tbody中操作，也就是table的lastChild。

    所以层次结构是 table -- tbody -- tr -- th 

    此外我还略微修改了一些地方，就不多说了，下面是代码（应该没什么问题了）：

    <!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">
* {
font-family: "微软雅黑";
font-size: 12px
}
input, th, td {
font-family: "微软雅黑";
font-size: 12px
}
td, input {
text-align: center;
}
a:link {
color: #F00;
}


</style>
<script type="text/javascript"> 

       // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        window.onload = function(){
        var tbody = document.getElementById('myTable').lastChild;
trs = tbody.getElementsByTagName('tr');   
for(var i =1;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor ="#f2de76";
} 
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
} 
} 
    }

     	 //增加行函数
     function addNode(){
 	  
 var table=document.getElementById("myTable").lastChild;
 var newtr=document.createElement("tr");
 
  //新增选框
 var newtd0=document.createElement("td");
 newtd0.innerHTML="<input type='checkbox' name='checkbox' />";
 newtr.appendChild(newtd0);
 
 //新增学号
 var newtd1=document.createElement("td");
  var number=document.getElementById("number1");
 newtd1.innerHTML= number.value;	  	  //var txt = document.createTextNode(document.getElementById("number1").value);
          //newtd1.appendChild(txt);
 newtr.appendChild(newtd1);
 
 //新增姓名
 var newtd2=document.createElement("td");
  var name=document.getElementById("name1");
 newtd2.innerHTML= name.value;
 newtr.appendChild(newtd2);
 
 //新增性别
 var newtd3=document.createElement("td");
  var sex=document.getElementById("sex1");
 newtd3.innerHTML= sex.value;	  
 newtr.appendChild(newtd3);
 
 //新增删除选项
 var newtd4=document.createElement("td");
 newtd4.innerHTML="<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
 newtr.appendChild(newtd4);
 
 //新增性别	  
 table.appendChild(newtr);
 
 //获取输入框的值，并传递给新增行

 
 
var tbody = document.getElementById('myTable').lastChild;
trs = tbody.getElementsByTagName('tr');   
for(var i =1;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor ="#f2de76";
} 
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
} 
} 
 }     
 
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
 //复制行函数
 function copyRow(){
     	 var myTable = document.getElementById("myTable").lastChild;
     	 var selectBox = myTable.getElementsByTagName("input");
     	 for(var i=1; i<selectBox.length; i++){
         	 if(selectBox[i].checked){

             selectBox[i].checked = false;//克隆后勾选必须取消，否则反复复制形成死循环，selectBox.length是变化的
			 var newTr = selectBox[i].parentNode.parentNode.cloneNode(true);
             myTable.appendChild(newTr);
         	   }
      }
 	  }     
 
 	  //复制行全选
 function selectAll(){
var myTable = document.getElementById("myTable").lastChild;
     	 var selectBox = myTable.getElementsByTagName("input");
     	 for(var i=1; i<selectBox.length; i++){
         	 if(!selectBox[i].checked){
             selectBox[i].checked = true;
            
         	   }
        }
 } 
   
 //复制行取消
 function cancelAll(){
var myTable = document.getElementById("myTable");
     	 var selectBox = myTable.getElementsByTagName("input");
     	 for(var i=1; i<selectBox.length; i++){
         	 if(selectBox[i].checked){
             selectBox[i].checked = false;
            
         	   }
        }
 } 
 
     // 创建删除函数
     
 function deleteRow(obj){
   var tbody = document.getElementById('myTable').lastChild;  
var tr = obj.parentNode.parentNode;
var con=confirm("你确定删除此行吗");
if(con){
tbody.removeChild(tr);}
}  
 function selectDel(){
var con=confirm("你确定删除此行吗");
     	var myTable = document.getElementById('myTable').lastChild;
     	var selectBox = myTable.getElementsByTagName("input");
     	for(var i=selectBox.length-1; i>0; i--){
        var tr = selectBox[i].parentNode.parentNode;
        if(selectBox[i].checked && con){
        myTable.removeChild(tr);
         	   }
        }
  }
  
  
 // 重置表格函数
 function Refresh(){
var con=confirm("你确定重置表格吗");
        if(con){
        location.reload();           
        }	   
  
  }
  </script>
  
</head>
<body>
<input type="button" value="添加一行"   onclick="addNode()"/>
<!--在添加按钮上添加点击事件  --> 
学号：<input id="number1" type="text" value="xh003"/>
姓名：<input id="name1" type="text" value="张小芳"/>
性别：<input id="sex1" type="text" value="女"/>
<input type="button" value="重置表格"  onclick="Refresh()"/>
<br></br>
<input type="button" value="复制表格"  onclick="copyRow()"/>
<input type="button" value="全选"  onclick="selectAll()"/>
<input type="button" value="取消"  onclick="cancelAll()"/>
<input type="button" value="选择删除"  onclick="selectDel()"/>

<table id="myTable" border="1px"  width="60%" bgcolor="#fff">
  <tr>
    <th width="30px"><input type="text" name="checkbox" value="选框"/></th>
    <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>操作</th>
  </tr>
  <tr >
    <td width="30px"><input type="checkbox" name="checkbox" /></td>
    <td>xh001</td>
    <td>王小明</td>
    <td>男</td>
    <td width="40px"><a href="javascript:;" onclick="deleteRow(this);">删除</a></td>
    <!--在删除按钮上添加点击事件  --> 
  </tr>
  <tr>
    <td width="30px"><input type="checkbox" name="checkbox" /></td>
    <td>xh002</td>
    <td>刘小芳</td>
    <td>女</td>
    <td width="40px"><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
    <!--在删除按钮上添加点击事件  --> 
  </tr>
</table>
<br>
</br>
</body>
</html>


    3
  • sz_yeefun
    2016-09-09 02:46:38

    可以看一下這個的整理：
http://www.cnblogs.com/yanglin-gdqy-blog/p/4534322.html

    0
  • 天涯蝶舞
    2016-08-03 12:07:32

    太感谢了

    0