<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>
??<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>
??<script?type="text/javascript">
??????window.onload?=?function(){
???????????var?trs?=?document.getElementsByTagName('tr');
???????????for(var?i?=?1;?i?<?trs.length;?i++){
????????????????trs[i].onmouseover?=?function(){
?????????????????????this.style.backgroundColor?=?"#f2f2f2";
????????????????}
????????????????trs[i].onmouseout?=?function(){
?????????????????????this.style.backgroundColor?=?"#fff";
????????????????}
??????????}
????????}
??????function?add(){
????????var?table=document.getElementById("table").lastChild;
????????var?tr=document.createElement("tr");
????????var?td=document.createElement("td");
????????td.innerHTML="<input?type="text"/>";
????????tr.appendChild(td);
????????var?td=document.createElement("td");
????????td.innerHTML="<input?type="text"/>";
????????tr.appendChild(td);
????????var?td=document.createElement("td");
????????td.innerHTML="<a?href="#"?onclick?=?"del(this);">刪除</a>";
????????tr.appendChild(td);
????????table.appendChild(tr);
??????}
??????function?del(obj){
????????var?tbody=document.getElementById("table").lastChild;
????????var??tr=obj.parentNode.parentNode;
????????tbody.removeChild(tr);
??????}
???
??</script>
?</head>
?<body>
?????<table?border="1"?width="50%"?id="table">
?????<tr>
????<th>學(xué)號</th>
????<th>姓名</th>
????<th>操作</th>
?????</tr>
????<tr>
????<td>xh001</td>
????<td>王小明</td>
????<td><a?href="javascript:;"onclick="del(this);">刪除</a></td>
?????</tr>
?????<tr>
????<td>xh002</td>
????<td>劉小芳</td>
????<td><a?href="javasript:;"?onclick?=?"del(this);"?>刪除</a></td>
?????</tr>
?????</table>
?????<input?type="button"?value="添加一行"??onclick?=?"add();"/>
?</body>
</html>
2016-08-03
? ? ? ??var?td=document.createElement("td");
????????td.innerHTML="<input?type="text"/>";
????????tr.appendChild(td);
????????var?td=document.createElement("td");
????????td.innerHTML="<input?type="text"/>";
????????tr.appendChild(td);
????????var?td=document.createElement("td");
????????td.innerHTML="<a?href="#"?onclick?=?"del(this);">刪除</a>";
這幾句里面的雙引號里面不能再次使用雙引號，里面要改為單引號
例如:td.innerHTML="<input?type="text"/>";改為
td.innerHTML="<input type='text'/>";
2016-08-03
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2.?節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示: ?圖見9-8章。
2016-08-03
?function?del(obj){
????????var?tbody=document.getElementById("table").lastChild;
????????var??tr=obj.parentNode.parentNode;
????????tbody.removeChild(tr);
? ? ?}
你的這個刪除函數(shù)定位準(zhǔn)確嗎？你確定刪除的lastChild就是你要刪的那一行？
2016-08-03
var?trs?=?document.getElementsByTagName('tr'); ?這里面的引號是單引號，不是應(yīng)該為雙引號的嗎？