动态添加可填写（仅供参考）
来源：9-22 编程练习
qq_慕慕947699
2019-10-10 16:56
<!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 () {
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
(function change() {
var dom = document.getElementsByTagName('tr')
for (var i = 0; i < dom.length; i++) {
dom[i].onmousemove = (function () {
this.style.backgroundColor = '#ccc'
})
dom[i].onmouseleave = (function () {
this.style.backgroundColor = "#f2f2f2";
})
}
})()
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function create(obj) {
var tab = document.getElementsByTagName('table')[0];
var tr = document.createElement('tr');
var td;
for (var i = 0; i < 3; i++) {
td = document.createElement('td');
switch (i) {
case 0:
td.innerHTML = 'xh00' + tab.childNodes.length;
break;
case 1:
td.innerHTML = '<input type="text" placeholder="请输入姓名"/>';
break;
default:
td.innerHTML = '<a href="javascript:;" onclick="del(this)">删除</a>';
break;
}
tr.appendChild(td)
}
tab.appendChild(tr);
}
// 创建删除函数
function del(obj) {
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode)
}
</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="javascript:;" onclick="del(this)">删除</a>
</td>
<!-- 在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="create()" />
<!-- 在添加按钮上添加点击事件 -->
</body>
</html>
写回答
关注
1回答
-
- DrivenCard
- 2019-11-15 16:41:29
//根据你的代码进行改进，修复了新增tr过程中，tr在table外的问题。学号以xh及3位数字显示。修复了鼠标移动上去后行变色问题。谢谢你的代码，刚开始无从下手。跟着你的代码实现了基础功能后，自己稍微拓展了一下。 <!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 () { changeStyle(); } function changeStyle(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 (function change() { var ctr = document.getElementsByTagName('tr') ctr[0].style.backgroundColor = "#C0C0C0"; for (var i = 1; i < ctr.length; i++) { ctr[i].onmousemove = (function () { this.style.backgroundColor = '#ccc' }) ctr[i].onmouseleave = (function () { this.style.backgroundColor = "#fff"; }) } })() } //输入姓名添加内容 function addName(){ var nm = document.getElementById("input_name"); var name = nm.value; console.log(name); if(name === "" || name === null){ alert("请输入姓名") }else{ addEvent(name); } } // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点； function addEvent(name) { var tab = document.getElementsByTagName('table')[0].childNodes[1]; var tr = tab.insertRow(); for (var i = 0; i < 3; i++) { var td = document.createElement('td'); var xh = tab.childNodes.length; switch (i) { case 0: td.innerHTML = "xh" + pad(xh,3); break; case 1: td.innerHTML = '<a>' + name + "<a/>"; break; default: td.innerHTML = '<a href="javascript:;" onclick="delEvent(this)">删除</a>'; break; } tr.appendChild(td) } tab.appendChild(tr); changeStyle(); } // 创建删除函数 function delEvent(obj) { obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); changeStyle(); } //创建3位学号，不全补0 function pad(num, n) { var len = num.toString().length; while(len < n) { num = "0" + num; len++; } return num; } </script> </head> <body> <input type="button" value="添加一行" onclick="addName()" /> <input type="text" value="" placeholder="请输入姓名" id="input_name"/> <!--在添加按钮上添加点击事件 --> <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="delEvent(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="delEvent(this);">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> </body> </html>
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468610 学习 · 21893 问题
相似问题