                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

动态添加可填写（仅供参考）

<!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>

qq_慕慕947699

2019-10-10

源自：JavaScript进阶篇 9-22

关注问题我要回答

520

操作

收起

1 回答

DrivenCard
2019-11-15

//根据你的代码进行改进，修复了新增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>