表格行的背景色为白色,单击其中一行后改变行tr的背景色为蓝色,其它行为白色

如题:表格行的背景色为白色,单击任意一行后改变行tr的背景色为蓝色,其它行为白色

请给出源代码,或者给点提示,谢谢!

10 个解决方案

#1

function getrow(obj)

{

 

	var element = event.srcElement.tagName; 


if(element=="TD"){

curRow=event.srcElement.parentElement;

line=curRow.rowIndex+1;

otd=curRow.document.getElementsByTagName("TD");

alert("这是第"+line+"行"); 

alert(curRow.innerHTML);

alert(element);


}

这是获取当前单击的那一行

#2

不过只在IE中有效

#3

我刚才查了下手册

此对象在 Microsoft® Internet Explorer 4.0 的脚本中可用。

#4

6.0可以用的！就是FF不兼容

#5

上面代码里面的函数参数好像没用到,到底要不要带参数进去

#6

不用参数了！

#7

在tr中加一个onclick事件来改变tr的颜色。

#8



var oPrevRow = null;

	function changeBgColor(oRow){

		oRow.style.backgroundColor = "#FFFFFF";

		if(oPrevRow != null && oPrevRow != oRow){

			oPrevRow.style.backgroundColor = "#000090";

		}

		oPrevRow = oRow;

	}

要在每行加<tr bgcolor="#000090" onclick="changeBgColor(this)">
IE和FF下都可用

#9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script  language=javascript>
var selectedTr=null;

function c1(obj){
obj.style.background='#FFFFFF'; //把点到的那一行变希望的颜色;
if(selectedTr!=null) selectedTr.style.background="";
if(selectedTr==obj) selectedTr=null;
else selectedTr=obj;
}

function changeTrBackground(obj,color)
{
  if(selectedTr!=obj)  obj.style.backgroundColor=color;
}

</script>
</head>

<body>
<div style="font-size:10pt;">
注1：单击选中Tr，高亮显示，再单击取消选选中。。 <br/>


<br/>
注：本页面仅在IE6/Firefox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About SelectAndSubSelect">JK_10000@yahoo.com.cn</a><br/>
<hr/>
</div>

<input type=button value="选中的是哪一行？" onclick="alert(selectedTr?selectedTr.innerHTML:'没有选中行');">
  <table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#cccccc" >
    <tr onclick="c1(this);" onmouseover="changeTrBackground(this,'red');" onmouseout="changeTrBackground(this,'');">
      <td >1　</td>
    </tr>
    <tr onclick="c1(this);" onmouseover="changeTrBackground(this,'red');" onmouseout="changeTrBackground(this,'');">
      <td >2　</td>
    </tr>
    <tr onclick="c1(this);" onmouseover="changeTrBackground(this,'red');" onmouseout="changeTrBackground(this,'');">
      <td >3　</td>
    </tr>
  </table>
</body>
</html>

#10

.......

#1

function getrow(obj)

{

 

	var element = event.srcElement.tagName; 


if(element=="TD"){

curRow=event.srcElement.parentElement;

line=curRow.rowIndex+1;

otd=curRow.document.getElementsByTagName("TD");

alert("这是第"+line+"行"); 

alert(curRow.innerHTML);

alert(element);


}