一个简单的js效果

想问下。我一个table里有许多tr（不是服务器控件）
我想鼠标点中拿一行那一行的颜色就变红。
这个效果应该怎么写啊。。？急。马上给分。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用 event.srcElement 来找到事件触发源obj=event.srcElement;再判断obj的parentElement的tagName属性是否为TRvar a=obj.parentElement.parentElement;
if (a.tagName=="TR")
{
   a.style.backgroundColor="#ffff00"  //如果是TR改变背景色
}
没个TR写上,onclick="this.style.bcakgorundColor='red'"
可以直接这样
obj=event.srcElement;
if(obj.tagName=="TR")
{
    obj.style.backgroundColor="值";
}
省掉1楼的判断也行
呵呵，这还不简单？循环把所有的行颜色改变下就行了。
这样可以取得所有的行：
var oArrayTR=document.getElementsByTagName("TR");//这是得到所有的行
var length=oArrayTR.length;
for(var i=1;i<length;i++)
{
     aArrayTr[0].style.backgroundColor=="";//恢复所有行的颜色
}
var obj=event.srcElement;
var a=obj.parentElement.parentElement;
if (a.tagName=="TR")
{
   a.style.backgroundColor="#ffff00"  //改变点击行的颜色
}
这样是不是能解决？
oArrayTr[0]改成oArrayTr[i].笔误。呵呵
刚好看到一个例子：
第一步：在<head></head>中放入：
<script>
　　function checkme(obj,tr){　　if(obj.checked)　　tr.style.backgroundColor='blue'; 　　else　　tr.style.backgroundColor=''; 　　} </script>
第二步：把下面的代码放在合适的位置
<div>
<asp:datagrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 256px; POSITION: absolute; TOP: 224px"
runat="server">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:CheckBox id="checkbox1" Runat="server"></asp:CheckBox>
<asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
                        </div>
第三步：Page_Load中后台代码
　　ArrayList arr = new ArrayList(); 　　arr.Add("新闻综合"); 　　arr.Add("综艺"); 　　arr.Add("电影"); 　　arr.Add("教育"); 　　arr.Add("戏剧"); 　　arr.Add("军事"); 　　arr.Add("体育"); 　　DataGrid1.DataSource = arr; 　　DataGrid1.DataBind(); 　　int i; 　　for(i=0; i< DataGrid1.Items.Count; i++)
  {　　CheckBox cb; 　　cb=(CheckBox)DataGrid1.Items[i].FindControl("checkbox1"); 　　DataGrid1.Items[i].Attributes.Add("id","tr" + i.ToString()); 　　cb.Attributes.Add("onclick","checkme(this,tr" + i.ToString() + "); "); 　　}
不能。。还是和onclick="this.style.bcakgorundColor='red'"效果一样
为了兼容FF
event.srcElement   OnlyIE
event.targe        FF
<!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=gb2312" />
<title>无标题文档</title>
<script  language="javascript">
function ChangeColor()
{var oarray=document.getElementsByTagName("TR");
for(var i=0;i<oarray.length;i++)
{
oarray[i].style.backgroundColor="red";
}
var obj=event.srcElement;
var a=obj.parentNode;
if (a.tagName=="TR")
{
   a.style.backgroundColor="blue"  //改变点击行的颜色
}  }
</script>
</head><body>
<table width="200" border="1">
  <tr onclick="ChangeColor();">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr onclick="ChangeColor();">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr onclick="ChangeColor();">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
你自己试一下，大体代码都出来了。你可以酌情改的啊。不是要你copy过去。
<!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=gb2312" />
<title>无标题文档 </title>
<script  language="javascript">
function ChangeColor()
{ var oarray=document.getElementsByTagName("TR");
for(var i=0;i <oarray.length;i++)
{
oarray[i].style.backgroundColor="";
}
var obj=event.srcElement;
var a=obj.parentNode;
if (a.tagName=="TR")
{
   a.style.backgroundColor="red"  //改变点击行的颜色
}   }
</script>
</head> <body>
<table width="200" border="1">
   <tr onclick="ChangeColor();">
     <td>  </td>
     <td>  </td>
     <td>  </td>
   </tr>
   <tr onclick="ChangeColor();">
     <td>  </td>
     <td>  </td>
     <td>  </td>
   </tr>
   <tr onclick="ChangeColor();">
     <td>  </td>
     <td>  </td>
     <td>  </td>
   </tr>
</table>
</body>
</html> 这个代码绝对有用啊！怎么不用呢？
copy过去就是啦·