当css和js有冲突的时候该怎么处理？

原因在于你的CSS是TD的，而你改变的是TR的，所以没变，你的程序可以改下
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> TD { FONT-SIZE: 12px}
TABLE.List { border:0px; width:98%; padding:4px; background-color:#ffffff; }
TABLE.List TH { height: 24px; background-color:#799ae1; font-size: 12px; color: #ffffff; }
TABLE.List TD { padding-left:5px; line-height: 20px; background-color:#d6dff7; font-size: 12px; }
TR.H { BACKGROUND-COLOR: #A4B6D7 }
</style>
<script>
function CA(obj)
{
if (obj.checked==true)
{
objTR=obj.parentNode.parentNode.parentNode
for(var i=0;i<objTR.childNodes.length;i++)
{
objTR.childNodes[i].style.backgroundColor="Red";
}
}
else
{
obj.parentNode.parentNode.parentNode.style.removeAttribute("backgroundColor");
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table class="list" id="Table2" cellSpacing="1" align="center" border="0">
<tr>
<th width="5%">
<div align="center">
<input id="Repeater1__ctl0_cb_SelectCancel" type="checkbox" name="Repeater1:_ctl0:cb_SelectCancel"/>全选</th>
</div>
<th width="20%">
id</th>
<th width="20%">
pid</th>
<th width="15%">
name</th>
</tr>
<tr align="center">
<td width="5%" align="center" valign="middle">
<div align="center">
<input id="Repeater1__ctl1_cb_Id" type="checkbox" name="Repeater1:_ctl1:cb_Id"  onclick="CA(this);"/>
</div>
</td>
<td width="20%" align="center" valign="middle">
1
</td>
<td width="20%" align="center" valign="middle">
0
</td>
<td width="15%" align="center" valign="middle">
首页
</td>
</tr>
</table>
</form>
</body>
</HTML>

解决方案 »

  1.   

    <script>
    function CA(obj)
    {
    var tr=obj.parentNode.parentNode.parentNode;
    if (obj.checked==true)
    {
    for(i=0;i<tr.childNodes.length;i++)
    {
    tr.childNodes[i].style.backgroundColor="#A4B6D7";
    }
    }
    else
    {
    for(i=0;i<tr.childNodes.length;i++)
    {
    tr.childNodes[i].style.backgroundColor="";
    }
    }
    }
    </script>
      

  2.   

    这个效果已经实现了 但是现在又发现一个新的bug 我还有一个效果是鼠标停在该行时 该行变色 离开后恢复到原来的样子 但是如果该行的checkbox选中时 这个效果不能起作用 我实现这个效果用的是一下这个js 但是运行后发现点中checkbox后鼠标离开该行时 该行的颜色就变化了 这个怎么修改？谢谢了
    function HighLightOver()
    {
    HighLightList("#E0E6F7");
    }
    function HighLightOut()
    {
    HighLightList("");
    }// 高亮显示当前行
    function HighLightList(color)
    {
    // 找对象
    var el=event.srcElement;
    var b=false;
    var tabElement=null;
    while (!b)
    {
    el=GetParentElement(el, "TR")
    if (el)
    {
    tabElement=GetParentElement(el, "TABLE");
    if (tabElement!=null && tabElement.className.toUpperCase()=="LIST")
    {
    break;
    }
    el=tabElement;
    }
    else
    {
    return;
    }
    }

    // 行下的单元格对象进行高亮处理
    for (var i=0;i<el.children.length;i++)
    {
    if (el.children[i].tagName=="TD")
    {
    el.children[i].style.backgroundColor=color;
    }
    }
    }
    // 取标签名相同的父对象
    function GetParentElement(obj, tag)
    {
    while(obj!=null && obj.tagName!=tag)
    obj=obj.parentElement;
    return obj;
    }
    document.onmouseover=HighLightOver
    document.onmouseout=HighLightOut
      

  3.   

    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style> TD { FONT-SIZE: 12px}
    TABLE.List { border:0px; width:98%; padding:4px; background-color:#ffffff; }
    TABLE.List TH { height: 24px; background-color:#799ae1; font-size: 12px; color: #ffffff; }
    TABLE.List TD { padding-left:5px; line-height: 20px; background-color:#d6dff7; font-size: 12px; }
    TR.H { BACKGROUND-COLOR: #A4B6D7 }
    </style>
    <script>
    function CA(obj)
    {
    if (obj.checked==true)
    {
    objTR=obj.parentNode.parentNode.parentNode
    for(var i=0;i<objTR.childNodes.length;i++)
    {
    objTR.childNodes[i].style.backgroundColor="Red";
    }
    }
    else
    {
    obj.parentNode.parentNode.parentNode.style.removeAttribute("backgroundColor");
    }
    }
    function HighLightOver()
    {
    HighLightList("#E0E6F7");
    }
    function HighLightOut()
    {
    HighLightList("");
    }// 高亮显示当前行
    function HighLightList(color)
    {
    // 找对象
    var el=event.srcElement;
    var b=false;
    var tabElement=null;
    while (!b)
    {
    el=GetParentElement(el, "TR")
    if (el)
    {
    tabElement=GetParentElement(el, "TABLE");
    if (tabElement!=null && tabElement.className.toUpperCase()=="LIST")
    {
    break;
    }
    el=tabElement;
    }
    else
    {
    return;
    }
    }

    // 行下的单元格对象进行高亮处理
    for (var i=0;i<el.children.length;i++)
    {
    if (el.children[i].tagName=="TD"&&el.children[i].style.backgroundColor.toUpperCase()!="RED")
    {
    el.children[i].style.backgroundColor=color;
    }
    }
    }
    // 取标签名相同的父对象
    function GetParentElement(obj, tag)
    {
    while(obj!=null && obj.tagName!=tag)
    obj=obj.parentElement;
    return obj;
    }
    document.onmouseover=HighLightOver
    document.onmouseout=HighLightOut </script>
    </HEAD>
    <body>
    <form id="Form1" method="post" runat="server">
    <table class="list" id="Table2" cellSpacing="1" align="center" border="0">
    <tr>
    <th width="5%">
    <div align="center">
    <input id="Repeater1__ctl0_cb_SelectCancel" type="checkbox" name="Repeater1:_ctl0:cb_SelectCancel"/>全选</th>
    </div>
    <th width="20%">
    id</th>
    <th width="20%">
    pid</th>
    <th width="15%">
    name</th>
    </tr>
    <tr align="center">
    <td width="5%" align="center" valign="middle">
    <div align="center">
    <input id="Repeater1__ctl1_cb_Id" type="checkbox" name="Repeater1:_ctl1:cb_Id"  onclick="CA(this);"/>
    </div>
    </td>
    <td width="20%" align="center" valign="middle">
    1
    </td>
    <td width="20%" align="center" valign="middle">
    0
    </td>
    <td width="15%" align="center" valign="middle">
    首页
    </td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>
      

  4.   

    // 行下的单元格对象进行高亮处理
    for (var i=0;i<el.children.length;i++)
    {
        if(el.children[0].children[0].children[0].checked==false){
    if (el.children[i].tagName=="TD")
    {
    el.children[i].style.backgroundColor=color;
    }
    }
    }
      

  5.   

    另外,这个onmouseover最好加在你要控制的行,不然碰到别的table 了怎么办??
      

  6.   

    修改后的是能实现我想要的效果 但是当鼠标经过标题行(th)的时候就会报错 这个怎么解决阿？我不会js　赫赫　正在找资料学习
      

  7.   

    所以我叫你把onmouseover最好加在你要控制的行
    <tr align="center" onmouseover="HighLightList('#E0E6F7')" onmouseout="HighLightList()">
    <td width="5%" align="center" valign="middle">
    <div align="center">
    <input id="Repeater1__ctl1_cb_Id" type="checkbox" name="Repeater1:_ctl1:cb_Id"  onclick="CA(this);"/>
    </div>
    </td>
    <td width="20%" align="center" valign="middle">
    1
    </td>
    <td width="20%" align="center" valign="middle">
    0
    </td>
    <td width="15%" align="center" valign="middle">
    首页
    </td>
    </tr>
      

  8.   

    // 高亮显示当前行
    function HighLightList1(a,color)
    {
    var el=a;
    // 行下的单元格对象进行高亮处理
    for (var i=0;i<el.children.length;i++)
    {
        if(el.children[0].children[0].children[0].checked==false){
    if (el.children[i].tagName=="TD")
    {
    el.children[i].style.backgroundColor=color;
    }
    }
    }
    }
    <tr align="center" onmouseover="HighLightList1(this,'#E0E6F7')" onmouseout="HighLightList1(this,'')">
    <td width="5%" align="center" valign="middle">
    <div align="center">
    <input id="Repeater1__ctl1_cb_Id" type="checkbox" name="Repeater1:_ctl1:cb_Id"  onclick="CA(this);"/>
    </div>
    </td>
    <td width="20%" align="center" valign="middle">
    1
    </td>
    <td width="20%" align="center" valign="middle">
    0
    </td>
    <td width="15%" align="center" valign="middle">
    首页
    </td>
    </tr>
    简单的改了下