[紧急]想写一个删除所有table里面东西的按钮
raylism
2018-09-06 13:27
<!DOCTYPE html><html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 var row = document.getElementsByTagName('tr'); for (var i=0;i<row.length;i++){ row[i].setAttribute("onmouseover","highlightr(this)"); row[i].setAttribute("onmouseout","returnr(this)"); } } //change color prop method function highlightr(obj){ obj.style.backgroundColor="#f2f2f2"; } function returnr(obj){ obj.style.backgroundColor="white"; } // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点； // 创建删除函数 function remove(obj){ var r = obj.parentNode.parentNode; r.parentNode.removeChild(r); } //clear all function clear(){ var r = document.getElementById('table'); // var content = r.childNodes; for (var i=0;i<r.childNodes.length;i++){ if(r.childNodes[i].nodeType!=1){ continue; }else{ r.removeChild(r.childNodes[i]); } } // var a = obj.parentNode.firstChild; // a.removeChild(a.childNodes); } function add(){ //tr 元素 var r = document.createElement("tr"); for (var i=0;i<3;i++){ // td 元素 var n = document.createElement("td"); //td元素 属性添加 // n.innerHTML="<br/>"; if (i==2){ //删除 a元素 var d = document.createElement("a"); d.innerHTML="删除"; //a 元素 属性添加 d.href="javascript:;"; d.setAttribute("onclick","remove(this)"); //a元素 加入 td 元素 n.appendChild(d); } //td 加入 tr r.appendChild(n); } //tr 加入 table var t = document.getElementById("table"); t.appendChild(r); } </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="remove(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td >xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="remove(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onclick="add()"/> <input type="button" value="重置" onclick="clear()"/> <!--在添加按钮上添加点击事件 --> </body></html>上面是我的代码,我的 Clear() 函数好像不管用.. 我想写一个函数, 每当我按了 [重置] 按钮后 它会帮我清除table元素里的子元素...
在线等待帮助！！ 谢谢了！！
4回答
-
- 慕UI0287333
- 2018-09-06 18:18:50
写个点击事件让table的innerHTML为空
-
- raylism
- 2018-09-06 22:58:24
感谢二位,两个方法都可以！
-
- 慕仰6284726
- 2018-09-06 17:47:13
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
// 创建删除函数
function del(){
var tab = document.getElementById("table");
for(var i=0; i<tab.childNodes.length; i++){
tab.removeChild(tab.childNodes[i]);
}
}
</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="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<t>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 -->
<input type="button" value="重置" onclick="del()"/>
</body>
</html>
你那个代码太乱了，我写了一个，你看看是你想要的效果不
-
- 冯世新
- 2018-09-06 16:06:26
wybzd bzd不知道
JavaScript进阶篇
468869 学习 · 22582 问题
相似问题