表格被套上了CSS样式,就再也动态地改变不了了吗?

把CSS定在表格的外壳上，然后通过 .cssName table{} 这种模式定义到里面的样式。

解决方案 »

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

add new class named class2.In class2,change color.
use:
document.getElementById("table ID").className = class2
document.getElementById("table ID").currentStyle.backgroundColor = "#FF0000" ;
支持楼上做法，再新定义一个CSS，把背景留空，以变量来控制
你要明白 !important 的用法就不会迷糊了...
这样怎么还是不行??<!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>
<link href="css/cssCn.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
.over tr{
background:#FFFFCC !important
}
.out tr{
background:#FFFFFF !important
}
</style>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="tb_datalist">
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield2" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over''" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over''" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over''" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over''" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
</table>
</body>
</html>
<style type="text/css">
.over tr{
background:#FFFFCC !important
}
.out tr{
background:#FFFFFF !important
}
</style>--->>><style type="text/css">
table .over {
background:#FFFFCC !important
}
table .out {
background:#FFFFFF !important
}
</style>
..............
我觉得好像理解上有误区，背景颜色不应该定义在tr 标签上
tr只是表示语义的符号，不是实体了
tr的表现是通过td来实现的
所以我认为问题不在于!important 而是css选择器选错了对象
我把楼主的代码修改成这样的了，可以试试看
tr.over td{
background:#FFFFCC;
}
tr.out td{
background:#FFFFFF;
}<!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>
<style type="text/css">
tr.over td{
background:#FFFFCC !important
}
tr.out td{
background:#FFFFFF !important
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="tb_datalist">
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield2" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
  <tr onmouseover="this.className='over'" onmouseout="this.className='out'">
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
    <td><input type="text" name="textfield3" /></td>
  </tr>
</table>
</body>
</html>
http://www.10kuai.cn/csdn/csdn-5264270.html
这个是演示地址了，blueidea 可以运行代码，不得不承认 csdn还是有些不足啊
如孤竹林言，
用以下也可以：
<style type="text/css">
tr.over{
background:#FFFFCC !important
}
tr.out{
background:#FFFFFF !important
}
</style>