csstr背景色
㈠ 用CSS样式实现表的行显示不同颜色背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" media="screen">
<!-- /* PR-CSS */
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
tr.t1 td {background-color:#fff;}/* 第一行的背景色 */
tr.t2 td {background-color:#eee;}/* 第二行的背景色 */
tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */
-->
</style>
</head>
<body>
<table id="tab">
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("tr");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//-->
</script>
</body>
</html>
自己粘贴下去研究一下吧。
㈡ 用CSS怎样实现鼠标移上去表格内的背景颜色变色 求一高手······谢谢···
<html>
<head>
<title>鼠标划过表格行变色－简洁实现</title>
<style type="text/css">
#tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>库存数量</th>
<th>货位</th>
</tr>
<tr>
<td>丁学最喜欢的仙四豪华版-菱纱版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪华版-梦璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首发</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].onmouseover=function(){this.style.background="#0EF";}
obj.rows[i].onmouseout=function(){this.style.background="";}
}
</script>
</body>
</html>
㈢ table tr设置background-color 无效 css朋友帮忙看下
应该是被其他的背景覆盖了。
我们一般不支持给tr设置背景，很容易被td的背景覆盖，而且td不会继承tr的背景色，只有td的背景是透明的情况下，才会看到tr的背景色。
曾经做过测试发现，如果将一张图片设置为tr的背景（未平铺只显示一张，靠左），实际显示却是每个td中都有一张背景图。
㈣ jquery改变tr背景色的代码
本篇文章主要是对jquery改变tr背景色的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
id为tr的ID
设置当前选择行背景色，同时置其他行背景为另一种颜色
代码如下:
$('#id').css("background-color",
"#e5e5e5").siblings().css("background-color",
"#FFFFFF");
㈤ onclick鼠标单击改变tr背景色
window.onload=function showtable(){
var t1 = document.getElementById('t1');
var tr = t1.getElementsByTagName('tr');
for (var i=0;i<tr.length;i++){
tr[i].style.backgroundColor="#DFFCFD";
tr[i].onclick=function(){
this.style.backgroundColor="#FFB584";
} }
}
㈥ JS控制table特定tr的背景颜色
代码如下：
<script>
//js放到table下，才能检测到tr数组
var trs = document.getElementById("tableBox").getElementsByTagName("tr");
var trs=document.getElementById("tableBox").getElementsByTagName("tr");
$(function(){
for(var i=0;i<trs.length;i++){
trs[i].onmousedown = function(){
mousedownclick(this);
}
}
});
function mousedownclick(obj){
for(var j=0;j<trs.length;j++){
if(trs[j]==obj){
trs[j].style.background='blue';
}else{
trs[j].style.background='';
}
}
}
</script>
(6)csstr背景色扩展阅读
js操作table的各种用法：
(1)得到table 中tbody 的内容 ：$('#simple-table').find('tbody').html();
(2)点击td时，获取点击的行号：
$('#simple-table tbody').on( 'click', 'td', function (e) {
normalRowIndex = $(this).parent().index(); //行号
console.log("正常工作表行："+normalRowIndex);
});
(3)为table追加一行：
function addNormalTR(){
$('#simple-table').find('tbody').append(trtd); //tdtd为拼接的trtd 的html内容。
}
(4) 点击td中的元素获取，当前行号： obj.parentNode.parentNode.rowIndex;//obj 为元素对象
㈦ html / css 表格背景色问题
"green" 和 "green; "显示颜色是不同的。
{
border:1px solid green;
}
和
<td bgcolor=green;>
区别在这里
应该说用英文的颜色 green后面如果加分号是错误回的写法答。换个颜色如“red”显示红色，“red;”则显示还是草绿色。
㈧ 两句css给同一个表格的td标签设置背景色谁会起作用为什么
这里就涉及到css样式的优先级了。
从大的方面将，html文档中样式有三种定义方式。
1、外部样式，通过link引用外部样式文件，如<link rel="stylesheet" type="text/css" href="style.css"/>
2、内部样式，在html文档中定义样式，如h3{color:green;}
3、内嵌样式，在某个dom元素上定义style。
这三种方式的优先级从1-3逐渐增强。
如果同时定义了好几个样式作用于一个元素上，则最终起作用的按照以下优先级。
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
权值越高的就优先起作用。
㈨ 用innerHTML往<tr>里加背景色
有两种方法，经过我仔细整理，贡献给你，第一：直接用CSS：
javaScript可以通过CSS样式间接改变<td>背景颜色:
1。<td>必须有id号 即<td id="td1">。( 方便javaScript调用 document.getElementById("td1"))
2。CSS样式中背景颜色background-color,颜色格式#rrggbb,rgb(rr,gg,bb)(javaScript背景颜色backgroundColor)
范例html文件代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 改变表格颜色</title>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td id="td1" bgcolor="#000000"> </td><!--设置黑色的(实际为红色)-->
<td bgcolor="#000000"> </td>
</tr>
</table>
</body>
<script language="javascript" type="text/javascript">
<!--
document.getElementById("td1").style.backgroundColor="#FF0000";
//引用了td1单元格,改变backgroundColor值
-->
</script>
</html>
第二：用DOM节点
用javascript 能得到td 里面的背景颜色/图片
<td id="cell" align="center" background="Images/respon_tframe_m.gif"><a href="#" class="style28" onclick="">工作程序</a></td>
<script language=javascript>
function getAttribute(ctrId, attributeName) {
var c = document.all(ctrId);
return c.getAttribute(attributeName);
}
alert( getAttribute("cell", "background") );
</script>
function setAttribute(ctrId, attributeName, attributeValue) {
var c = document.all(ctrId);
return c.setAttribute(attributeName, attributeValue, 0);
}
setAttribute("cell", "background", "Images/respon_tframe_m.gif");
㈩ CSS中表格第一行设置颜色 </tr>
第一行使用th来写，也可以隔行设置相同类名