js處理表格對(duì)table進(jìn)行修飾
更新時(shí)間：2014年05月26日 09:30:46 作者：
這篇文章主要介紹了js處理表格對(duì)table進(jìn)行修飾的一些小技巧,需要的朋友可以參考下
js處理表格
1、行顏色間隔顯示
css樣式：兩個(gè)選擇器
<style type="text/css">
.one{
background-color:#33ffcc;
}
.two{
backgound-color:#ffff66;
}
</style>
<script type="text/javascript">
function trcolor()
//控制間隔行顏色顯示不同
{
var tabNode = document.getElementsByTagName("table")[0];
//獲取table節(jié)點(diǎn)
var trs = tabNode.rows;
//獲取table中的所有的行
for(var x=1; x<trs.length;x++)
{
if(x%2 == 1)
trs[x].className ="one";
else
trs[x].className ="two";
}
}
//通過(guò)onload方法，在網(wǎng)頁(yè)加載完成后，運(yùn)行trcolor方法，實(shí)現(xiàn)表格的間隔行顏色。
window.onload = function()
{
trcolor();
}
</script>
2、鼠標(biāo)移動(dòng)到某一行，改行顏色加亮，移開后恢復(fù)原來(lái)顏色
<style type="text/css">
.over{
background-color:##00ff00;
}
<style>
<script type="text/javascript">
var name;
function trMouse()
{
var tabNode = document.getELementsByTagName("table")[0];
//通過(guò)for循環(huán)，對(duì)每個(gè)tr標(biāo)簽加上onmouseover與onmouseout屬性
for(var x=0;x<trs[x].length;x++)
{
trs[x].onmouseover = function()
{
name=this.className;
this.className="over";
}
tes[x].onmouseout = function()
{
this.className = name;
}
}
}
</script>
1、行顏色間隔顯示
css樣式：兩個(gè)選擇器
復(fù)制代碼 代碼如下:
<style type="text/css">
.one{
background-color:#33ffcc;
}
.two{
backgound-color:#ffff66;
}
</style>
<script type="text/javascript">
function trcolor()
//控制間隔行顏色顯示不同
{
var tabNode = document.getElementsByTagName("table")[0];
//獲取table節(jié)點(diǎn)
var trs = tabNode.rows;
//獲取table中的所有的行
for(var x=1; x<trs.length;x++)
{
if(x%2 == 1)
trs[x].className ="one";
else
trs[x].className ="two";
}
}
//通過(guò)onload方法，在網(wǎng)頁(yè)加載完成后，運(yùn)行trcolor方法，實(shí)現(xiàn)表格的間隔行顏色。
window.onload = function()
{
trcolor();
}
</script>
2、鼠標(biāo)移動(dòng)到某一行，改行顏色加亮，移開后恢復(fù)原來(lái)顏色
復(fù)制代碼 代碼如下:
<style type="text/css">
.over{
background-color:##00ff00;
}
<style>
<script type="text/javascript">
var name;
function trMouse()
{
var tabNode = document.getELementsByTagName("table")[0];
//通過(guò)for循環(huán)，對(duì)每個(gè)tr標(biāo)簽加上onmouseover與onmouseout屬性
for(var x=0;x<trs[x].length;x++)
{
trs[x].onmouseover = function()
{
name=this.className;
this.className="over";
}
tes[x].onmouseout = function()
{
this.className = name;
}
}
}
</script>
您可能感興趣的文章:
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行
- JavaScript遍歷table表格中的某行某列并打印其值
- 鍵盤上下鍵移動(dòng)選擇table表格行的js代碼
- js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
- JS實(shí)現(xiàn)table表格內(nèi)針對(duì)某列內(nèi)容進(jìn)行即時(shí)搜索篩選功能
- jQuery 選擇表格(table)里的行和列及改變簡(jiǎn)單樣式
- jQuery對(duì)table表格進(jìn)行增刪改查
- 基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
- jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能示例
相關(guān)文章
基于JavaScript實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)年月日三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
今天小編就為大家分享一篇Layui表格行工具事件與數(shù)據(jù)回填方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要為大家介紹了前端算法題解leetcode114二叉樹展開為鏈表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法,涉及javascript針對(duì)字符串中字符運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
微信小程序返回上一級(jí)頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序返回上一級(jí)頁(yè)面的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要幫助大家輕松實(shí)現(xiàn)JavaScript圖片切換，內(nèi)容很精簡(jiǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
JS實(shí)現(xiàn)刷新父頁(yè)面不彈出提示框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)刷新父頁(yè)面不彈出提示框的方法,實(shí)例分析了javascript子窗口的打開以及子窗口與父窗口的交互操作技巧,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了javascript跨瀏覽器事件處理機(jī)制，感興趣的小伙伴們可以參考一下2016-03-03
本文主要介紹了js字符串與Unicode編碼互相轉(zhuǎn)換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05