20分提问: 改变tr的class值的问题

Thaiki 2007-12-03 06:02:10

有一个table,点击了一行则对应的行的class值为class1,其他为class2

<table>
<tr class='class2'><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td></tr>
<tr><td>111</td><td>111</td></tr>
</table>

我看过遍历table的,我这个应该可以实现,但我不知道怎么改

...全文

127 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

yanxw_227 2007-12-04

打赏
举报

给你个类似的吧，不知道有用吗：
<script>
var obj = null;
function hilight() {
var e=window.event.srcElement;
e=e.parentElement;
if(e.tagName!="TR") return;
if(obj!=null) obj.runtimeStyle.backgroundColor="";
obj=e;
obj.runtimeStyle.backgroundColor="#FFE28C";
}
</script>

<table border=1>
<tr onclick='hilight();'>
<td>aa</td>
</tr>
<tr onclick='hilight();'>
<td>bb</td>
</tr>
<tr onclick='hilight();'>
<td>cc</td>
</tr>
</table>

Thaiki 2007-12-04

打赏
举报

实践出真理

6楼的再改下就好了:
<script type="text/javascript">

</script>

就是把if语句放前面去了,这样的话,如果只有一行,那么这一行的颜色不会变了!

Thaiki 2007-12-04

打赏
举报

6楼高!

不遍历,利用全局变量就可以,嘿嘿,

西安风影 2007-12-04

打赏
举报

5楼也正确
但html有冗余em id="myid"></em> 可加if语句判断
<script>
function changeTrStyle(tr) {
var tid=document.getElementById("myid") ;
if(tid)
{
tid.id="";
}
tr.id="myid";
}
</script>
<style>
#myid{font-size:16px;
font-family:Verdana,sans-serif;
background-color:#400000;
color:white;}
</style>
<table border=1>
<tr onclick="changeTrStyle(this)"> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)"> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)"> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)"> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)"> <td> 111 </td> <td> 111 </td> </tr>
</table>

西安风影 2007-12-04

打赏
举报

修改二楼实现取消别的tr样式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>

<body>
<table>
<tr class="class2" onclick="changeTrStyle(this);"><td>111</td><td>111</td></tr>
<tr class="class2" onclick="changeTrStyle(this);"><td>222</td><td>222</td></tr>
</table>
</body>
</html>

luobo525 2007-12-04

打赏
举报

fxs_2008方法不错
试了一下



<script>

function   changeTrStyle(tr)   { 

          var  tid=document.getElementById("myid") ;

          tid.id="" ;

          tr.id="myid" ;

        } 

</script>

<style>

#myid{font-size:16px;

    font-family:Verdana,sans-serif;

    background-color:#400000;

    color:white;}

</style><em id="myid"></em>

<table border=1>   

<tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   

<tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   

<tr   onclick="changeTrStyle(this)"   id="" >   <td>   111   </td>   <td>   111   </td>   </tr>   

<tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   

<tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   

</table>

Thaiki 2007-12-04

打赏
举报

二楼的还差一点点,就是没有取消别的tr的样式

fxs_2008 2007-12-03

打赏
举报

每个<tr onclick="changeTrStyle(this);">都要有加oncick

function changeTrStyle(tr) {
tr.className = "class1";
}
函数同时设其他tr的class为空
其实用id更好，Id 是唯一的，先查Id 删除，再设

function changeTrStyle(tr) {
var tid=getelementbyid("myid")
tid.value=""
this.id="myid"
}

//上面的不一定正确，但就是那个意思

<table>
<tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this) > <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr>
<tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr>
</table>

乌镇程序员 2007-12-03

打赏
举报

"我看过遍历table的,我这个应该可以实现,但我不知道怎么改"--这一句看不明白..

不知道是不是这样...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style type="text/css">

<!--

.class1 {

	font-size:16px;

	font-family:Verdana,sans-serif;

	background-color:#400000;

	color:white;

}

.class2 {

	font-size:12px;

	background-color:#CCC;

}



table {

	border:1px solid #008000;

	width:300px;

}



-->

</style>

<script type="text/javascript">

<!--

	function changeTrStyle(tr) {

		tr.className = "class1";

	}

-->

</script>

</head>



<body>

<table>

	<tr class="class2" onclick="changeTrStyle(this);"><td>111</td><td>111</td></tr>

    <tr class="class2"><td>222</td><td>222</td></tr>

</table>

</body>

</html>