js兼容標(biāo)準(zhǔn)的表格變色效果
更新時(shí)間:2008年06月28日 17:14:24 作者:
符合標(biāo)準(zhǔn)的表格變色的js代碼
<!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" />
<style type="text/css">
* { margin:0; padding:0; font-size:14px }
body { text-align:center;}
#btn { list-style:none inside; width:210px; margin:10px auto; clear:both; }
#btn li { float:left; width:100px; line-height:20px }
#btn li a{ display:block; text-decoration:none; color:#333333}
#gray { background:#f5f5f5; cursor: pointer }
#green { background:#D7ECDE; cursor:pointer }
table { border-collapse:collapse; width:70%; margin:10px auto }
td { line-height:100%; height:24px; line-height:24px; padding:0 4px }
td a { text-decoration:none; color:#333; display:block; }
#tab_gray td { border:1px solid #B9B9B9; background: #F2F2F2; }
#tab_green td { border:1px solid #95CCA7; background:#EBF5EE; }
#tab_gray td:hover, #tab_green td:hover { background:#fff; }
</style>
</head>
<body>
<ul id="btn">
<li id="gray"><a href="javascript:void()" onclick="gray()">gray</a></li>
<li id="green"><a href="javascript:void()" onclick="green()">green</a></li>
</ul>
<table id="tab_gray">
<tr>
<td><a href="#">Table</a></td>
<td><a href="#">Table</a></td>
<td><a href="#">Table</a></td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<script language="javascript">
function green(){
document.getElementById("tab_gray").id="tab_green";
}
function gray(){
document.getElementById("tab_green").id="tab_gray";
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0; font-size:14px }
body { text-align:center;}
#btn { list-style:none inside; width:210px; margin:10px auto; clear:both; }
#btn li { float:left; width:100px; line-height:20px }
#btn li a{ display:block; text-decoration:none; color:#333333}
#gray { background:#f5f5f5; cursor: pointer }
#green { background:#D7ECDE; cursor:pointer }
table { border-collapse:collapse; width:70%; margin:10px auto }
td { line-height:100%; height:24px; line-height:24px; padding:0 4px }
td a { text-decoration:none; color:#333; display:block; }
#tab_gray td { border:1px solid #B9B9B9; background: #F2F2F2; }
#tab_green td { border:1px solid #95CCA7; background:#EBF5EE; }
#tab_gray td:hover, #tab_green td:hover { background:#fff; }
</style>
</head>
<body>
<ul id="btn">
<li id="gray"><a href="javascript:void()" onclick="gray()">gray</a></li>
<li id="green"><a href="javascript:void()" onclick="green()">green</a></li>
</ul>
<table id="tab_gray">
<tr>
<td><a href="#">Table</a></td>
<td><a href="#">Table</a></td>
<td><a href="#">Table</a></td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<script language="javascript">
function green(){
document.getElementById("tab_gray").id="tab_green";
}
function gray(){
document.getElementById("tab_green").id="tab_gray";
}
</script>
</body>
</html>
您可能感興趣的文章:
- JS控制表格隔行變色
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- 一個(gè)簡(jiǎn)單但常用的javascript表格樣式_鼠標(biāo)劃過(guò)行變色 簡(jiǎn)潔實(shí)現(xiàn)
- javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- 用JS控制表格的逐行變色的表單
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- JS實(shí)現(xiàn)表格隔行變色
相關(guān)文章
JavaScript中創(chuàng)建對(duì)象的模式匯總
本文給大家js創(chuàng)建對(duì)象的模式包括對(duì)象字面量,工廠模式,構(gòu)造函數(shù)模式,原型模式,結(jié)合構(gòu)造函數(shù)和原型模式,原型動(dòng)態(tài)模式 ,感興趣的朋友參考下2016-04-04JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09淺談 Webpack 如何處理圖片(開(kāi)發(fā)、打包、優(yōu)化)
這篇文章主要介紹了淺談 Webpack 如何處理圖片(開(kāi)發(fā)、打包、優(yōu)化),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05深入了解JavaScript中的二進(jìn)制操作及位掩碼應(yīng)用
在JavaScript中,二進(jìn)制操作可以說(shuō)是一項(xiàng)非常強(qiáng)大和有用的技能,尤其是在處理數(shù)據(jù)和位掩碼時(shí),它們是不可或缺的,本文將介紹JavaScript中的二進(jìn)制操作,包括什么是二進(jìn)制以及如何在JavaScript中進(jìn)行二進(jìn)制操作2023-06-06JavaScript實(shí)現(xiàn)手機(jī)號(hào)碼 3-4-4格式并控制新增和刪除時(shí)光標(biāo)的位置
這篇文章主要介紹了JavaScript實(shí)現(xiàn)手機(jī)號(hào)碼 3-4-4格式并控制新增和刪除時(shí)光標(biāo)的位置,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06js獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08