课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

来源：9-22 编程练习

天涯蝶舞

2016-08-02 16:49

问题描述：

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>



写回答 关注

3回答

  • 水里有条鱼
    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>


    0 3
  • sz_yeefun
    2016-09-09 02:46:38
    可以看一下這個的整理：
http://www.cnblogs.com/yanglin-gdqy-blog/p/4534322.html
    0 0
  • 天涯蝶舞
    2016-08-03 12:07:32

    太感谢了

    0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题

麻烦各路大神帮忙看看下面这个删除函数的问题

回答 4

大神们能不能帮我看看是哪里出问题

回答 2

想删除javascript这个节点，为什么老是先删除php呢，明明看我的代码没有错啊，求大神看看

回答 1

大神们能帮我看看哪里出问题了吗

回答 2

遇到瓶颈了，删除任意删除实在是搞不来，求大神帮我看看吧

回答 1

打开慕课网App查看更多内容