大神們幫我看看，這個表格全選和刪除是什么問題呢？
問題描述：
1、復(fù)制或新添加的行點擊刪除能成功刪除，但直接刪除原始的xh001和xh002行就不能成功；
2、通過“添加一行”新增表格，當(dāng)新增的數(shù)量大于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";
}?
}?
? ? }
? ? ? //增加行函數(shù)
? ? ?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);
?
?//新增學(xué)號
?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; ? ?
?} ? ??
?
? ? ? // 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；
?//復(fù)制行函數(shù)
?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;//克隆后勾選必須取消，否則反復(fù)復(fù)制形成死循環(huán)，selectBox.length是變化的
? ? ? ? ? ? ?myTable.appendChild(newTr);
? ? ? ? ? ? }
? ? ? }
for(var i=0; i<myTable.rows.length; i++){
myTable.rows[i].getElementsByTagName("input")[0].checked = false;}//復(fù)制后取消選擇狀態(tài)
? ?} ? ??
?
? ?//復(fù)制行全選
?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;
? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? }
?}?
? ?
?//復(fù)制行取消
?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;
? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? }
?}?
?
? ? ?// 創(chuàng)建刪除函數(shù)
? ? ?
?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);
? ? ? ? ? ? }
? ? ? ? }
? }
??
??
?// 重置表格函數(shù)
?function Refresh(){
var con=confirm("你確定重置表格嗎");
? ? ? ? if(con){
? ? ? ? location.reload(); ? ? ? ? ??
? ? ? ? } ??
??
? }
? </script>
??
</head>
<body>
<input type="button" value="添加一行" ? onclick="addNode()"/>
<!--在添加按鈕上添加點擊事件 ?-->?
學(xué)號：<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="復(fù)制表格" ?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>學(xué)號</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
主要是要理解清楚table里面的層次結(jié)構(gòu)，table中thead、tfoot、tbody這三個元素是依次出現(xiàn)的，雖然可能我們在編寫代碼的時候并沒有定義這幾個元素，但是瀏覽器會默認，因此不管是添加行還是刪除行，都應(yīng)該在tbody中操作，也就是table的lastChild。
所以層次結(jié)構(gòu)是 table -- tbody -- tr -- th?
此外我還略微修改了一些地方，就不多說了，下面是代碼（應(yīng)該沒什么問題了）：
<!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"; }? }? ????} ????? ?//增加行函數(shù) ?????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); ? ?//新增學(xué)號 ?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"; }? }? ?}????? ? ??????//?編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點； ?//復(fù)制行函數(shù) ?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;//克隆后勾選必須取消，否則反復(fù)復(fù)制形成死循環(huán)，selectBox.length是變化的 ?var?newTr?=?selectBox[i].parentNode.parentNode.cloneNode(true); ?????????????myTable.appendChild(newTr); ????????? ???} ??????} ? ??}????? ? ? ??//復(fù)制行全選 ?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; ???????????? ????????? ???} ????????} ?}? ??? ?//復(fù)制行取消 ?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; ???????????? ????????? ???} ????????} ?}? ? ?????//?創(chuàng)建刪除函數(shù) ????? ?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); ????????? ???} ????????} ??} ?? ?? ?//?重置表格函數(shù) ?function?Refresh(){ var?con=confirm("你確定重置表格嗎"); ????????if(con){ ????????location.reload();??????????? ????????} ??? ?? ??} ??</script> ?? </head> <body> <input?type="button"?value="添加一行"???onclick="addNode()"/> <!--在添加按鈕上添加點擊事件??-->? 學(xué)號：<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="復(fù)制表格"??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>學(xué)號</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>2016-09-09
2016-08-03
太感謝了