qq_yEs先生_53591812
2016-08-03 18:19
<!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>学号</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>
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'/>";
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示: 图见9-8章。
function del(obj){
var tbody=document.getElementById("table").lastChild;
var tr=obj.parentNode.parentNode;
tbody.removeChild(tr);
}
你的这个删除函数定位准确吗?你确定删除的lastChild就是你要删的那一行?
var trs = document.getElementsByTagName('tr'); 这里面的引号是单引号,不是应该为双引号的吗?
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题