求一段点击table 列头整列变色的JavaScript

问答首页 → Web前端技术

0 0

求一段点击table 列头整列变色的JavaScript30

想要的效果是：点击行头（或列头）对应的整行（或整列）颜色变化但是行头和列头颜色不变再次点击选中行头（或列头）时颜色恢复为原来颜色~

如果点新的一行或列，之前的行或列颜色恢复，新点击的行变色

万分感谢。

JavaScript

2009年9月17日 17:20

isbogey
0
0 0 0

2个答案按时间排序按投票排序

0 0

这还不简单？？？所有表格头部定义同个id

<html>
<head>
<script language="JavaScript">
    <!--
		function MouseOut(obj){obj.className="class1";}
		function MouseOver(obj){obj.className="class2";}
    -->
</script>
<style type="text/css">
.class1{cursor: hand;						
			background-color: #fff;
			padding-right: 1px;
			padding-left: 2px;}
.class2{background-color: #ACE475;
	cursor: hand;
	padding-right: 1px;
	padding-left: 2px;}

</style>

</head>
<body>
<table>
<tr class='class1' onMouseOut="MouseOut(this)" onMouseOver="MouseOver(this)">
       <th>头部1</th>
       <th>头部2</th>
       <th>头部3</th>
</tr>
<tr>
       <td  onclick="">头部3</td>
       <td  onclick="">头部3</td>
</tr>
<tr>
       <td id='head'>头部3</td>
       <td>值3</td>
</tr>
</table>
</body>
</html>

2009年9月18日 11:12

jakend
8
0 0 0

添加评论

0 0

<html>
<head>
<script type="text/javascript">
    //<![CDATA[
		function a(tableid,thobj,pos){
			var table = document.getElementById(tableid);
			if(pos==null){				
				var trs = table.getElementsByTagName('tr');
				for(var i=0;i<trs.length;i++){
					trs[i].className='';
				}
				var tr = thobj.parentNode;
				tr.className= tr.className=='h'?'':'h';				
			}else{				
				var tds = table.getElementsByTagName('td');
				for(var i=0;i<tds.length;i++){
					tds[i].className='';
				}
				var trs = table.getElementsByTagName('tr');
				for(var i=0;i<trs.length;i++){
									var tdss = trs[i].getElementsByTagName('td');

					tdss[pos].className= tdss[pos].className=='h'?'':'h';
				}
			}
		}
    //]]>
</script>
<style type="text/css">
        .h{
		background: #ccc;
	}
</style>

</head>

<body>


<table width="100%" border="1" id="rowTable">
    <tr>
		<td onclick="a('rowTable',this);">横向表头</td>
	    <td>data1</td>
		<td>data2</td>
	</tr>
	<tr>
		<td onclick="a('rowTable',this);">横向表头</td>
		<td>data1</td>
		<td>data2</td>
	</tr>
	<tr>
		<td onclick="a('rowTable',this);">横向表头</td>
		<td>data1</td>
		<td>data2</td>
	</tr>
</table>

<table width="100%" border="1" id="colTable">
    <tr>
		<td onclick="a('colTable',this,0);">横向表头</td>
<td onclick="a('colTable',this,1);">横向表头</td>
<td onclick="a('colTable',this,2);">横向表头</td>
	    
		
	</tr>
	<tr>
		<td>data1</td>
		<td>data1</td>
		<td>data2</td>
	</tr>
	<tr>
		<td>data2</td>
		<td>data1</td>
		<td>data2</td>
	</tr>
</table>

</body>
</html>

firefox3，ie6,7,8测试通过，你可以打开http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2，然后把代码copy进去马上就可以试验效果

2009年9月17日 18:58