大神们帮我看看,这个表格全选和删除是什么问题呢?
问题描述:
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>