为什么鼠标只能移动到最后一行才能改变颜色，移动到其他行都没有变化？
八尺一寻
2017-09-05 19:16
<!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 (i=0;i<tr.length;i++) {
var x=tr[i];
x.onmouseover=function(){
x.style.backgroundColor="#f2f2f2";
}
x.onmouseout=function(){
x.style.backgroundColor="#fff";
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add() {
var td_1=document.createElement("td");
var td_2=document.createElement("td");
var td_3=document.createElement("td");
td.innerHTML="";
var tr=document.createElement("tr");
tr.appendChild(td);
var table=document.getElementsByTagName("table");
table[0].appendChild(tr);
}
// 创建删除函数
function remo(obj) {
var a=document.getElementsByTagName("a");
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="remo(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="remo(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()"/> <!--在添加按钮上添加点击事件 -->
</body>
</html>
3回答
-
- qq_灰色头像_17
- 2017-09-23 16:06:44
window.onload = function(){
var x;
var tr=document.getElementsByTagName("tr");
for (i=0;i<tr.length;i++) {
var x=tr[i];
}
x.onmouseover=function(){
x.style.backgroundColor="#f2f2f2";
}
x.onmouseout=function(){
x.style.backgroundColor="#fff";
}
}
试试这样行不，不行就只能把变色事件写到另一个函数里面再引用了
-
- 破旧的时光机3662066
- 2017-09-11 19:26:51
var tr=document.getElementsByTagName("tr");
for (i=0;i<tr.length;i++) {
var x=tr[i];
x.onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
x.onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
改成这样就对了，window.onload执行后进入循环，但是在你点上去的时候i的循环已经走完了x=tr[2] 这样就只能最后一个可以执行，你手动把i的大小改为i<2 就发现只有第二个可以换颜色。改成this之后就会指向前一个设置的对象
-
- Rooney83551379
- 2017-09-06 15:25:30
你好，我按照你的思路，完善了下你的代码，请作为参考。
<!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 tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {// 个人觉得， 首行标题不需要有选中状态，故从1开始，当然从0也行- -
var x = tr[i];
mouseInOut(x);
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add() {
var td_1 = document.createElement("td");
var td_2 = document.createElement("td");
var td_3 = document.createElement("td");
td_1.innerHTML = "";
td_2.innerHTML = "";
td_3.innerHTML = '<a href="javascript:;" onclick="remo(this)">删除</a>';
var tr = document.createElement("tr");
//下面是补充部分：
tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
mouseInOut(tr);
var table = document.getElementsByTagName("table");
table[0].appendChild(tr);
}
//公开一onmouseover、onmouseout的方法
function mouseInOut(x) {
x.onmouseover = function () {
x.style.backgroundColor = "#f2f2f2";
}
x.onmouseout = function () {
x.style.backgroundColor = "#fff";
}
}
// 创建删除函数
function remo(obj) {
var a = document.getElementsByTagName("a");
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="remo(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>
xh002
</td>
<td>
刘小芳
</td>
<td>
<a href="javascript:;" onclick="remo(this)">删除</a>
</td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" />
<!--在添加按钮上添加点击事件 -->
</body>
</html>
JavaScript进阶篇
467403 学习 · 21877 问题
相似问题