<!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 tr=document.getElementsByTagName('tr')
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
for (var i = 1; i < tr.length; i++) {
changeColor(tr[i])
}
function changeColor(obj){
obj.onmouseover=function(){
obj.style.backgroundColor='#f2f2f2'
}
obj.onmouseout=function(){
obj.style.backgroundColor='#fff'
}
}
}
var n=2
function add2(){
var insertO=document.getElementById('table')
var td1=document.createElement('td')
td1.innerHTML='xhoo'+(n++)
var td2=document.createElement('td')
td2.innerHTML=请输入姓名'
var td3=document.createElement('td')
td3.innerHTML='<a href="javascript:del();" >删除</a>'
var trO=document.createElement('tr')
insertO.appendChild(trO)
trO.appendChild(td1)
trO.appendChild(td2)
trO.appendChild(td3)
var tr=document.getElementsByTagName('tr')
for (var i = 1; i < tr.length; i++) {
changeColor(tr[i])
}
} // 编写一函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function del(obj){
var par=obj.parentNode.parentNode.parentNode
var chi=obj.parentNode.parentNode
par.removeChild(chi)
}// 创建删除函数
</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:del(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:del(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add2()"/> <!--在添加按钮上添加点击事件 -->
</body>
</html>
2 回答
Developer_Zuck
TA贡献112条经验 获得超42个赞
修改了三个地方，一个是字符集设置，一个是引号问题，一个是n++与++n的问题，现在可以变色以及添加，至于删除功能还没有帮你实现。你可以运行看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> //设置字符集，解决谷歌浏览器打开乱码问题
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var tr=document.getElementsByTagName('tr')
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
for (var i = 1; i < tr.length; i++) {
changeColor(tr[i])
}
function changeColor(obj){
obj.onmouseover=function(){
obj.style.backgroundColor='#f2f2f2'
}
obj.onmouseout=function(){
obj.style.backgroundColor='#fff'
}
}
}
var n=2
function add2(){
var insertO=document.getElementById('table')
var td1=document.createElement('td')
td1.innerHTML='xhoo'+(++n)//此处的n++应该改为++n，有区别的！
var td2=document.createElement('td')
td2.innerHTML='请输入姓名'//此处写漏了一个引号
var td3=document.createElement('td')
td3.innerHTML='<a href="javascript:del();" >删除</a>'
var trO=document.createElement('tr')
insertO.appendChild(trO)
trO.appendChild(td1)
trO.appendChild(td2)
trO.appendChild(td3)
var tr=document.getElementsByTagName('tr')
for (var i = 1; i < tr.length; i++) {
changeColor(tr[i])
}
} // 编写一函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function del(obj){
var par=obj.parentNode.parentNode.parentNode
var chi=obj.parentNode.parentNode
par.removeChild(chi)
}// 创建删除函数
</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:del(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:del(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add2()"/> <!--在添加按钮上添加点击事件 -->
</body>
</html>
添加回答
举报
0/150
提交
取消