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來寫，也可以隔行設置相同類名