js處理表格對(duì)table進(jìn)行修飾

js處理表格

1、行顏色間隔顯示

css樣式：兩個(gè)選擇器

.one{

background-color:#33ffcc;

}

.two{

backgound-color:#ffff66;

}

function trcolor()

//控制間隔行顏色顯示不同

{

var tabNode = document.getElementsByTagName("table")[0];

//獲取table節(jié)點(diǎn)

var trs = tabNode.rows;

//獲取table中的所有的行

for(var x=1; 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();

}

2、鼠標(biāo)移動(dòng)到某一行，改行顏色加亮，移開(kāi)后恢復(fù)原來(lái)顏色

.over{

background-color:##00ff00;

}

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].onmouseover = function()

{

name=this.className;

this.className="over";

}

tes[x].onmouseout = function()

{

this.className = name;

}

}

}

相關(guān)閱讀:

Linux系統(tǒng)中如何在PDF中嵌入LaTex中的所有字體

html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間

Win10系統(tǒng)下IE11瀏覽器怎么重置？ Windows10重置IE11瀏覽器圖文教程

HTML5 新舊語(yǔ)法標(biāo)記對(duì)我們有什么好處

JSP中使用JSTL按不同條件輸出內(nèi)容的方法

oracle關(guān)鍵字作為字段名使用方法

Win7玩游戲提示“顯卡器驅(qū)動(dòng)程序已停止響應(yīng)”問(wèn)題排查方法

asp.net微信開(kāi)發(fā)(開(kāi)發(fā)者接入)

jquery中EasyUI實(shí)現(xiàn)同步樹(shù)

HTML checkbox 點(diǎn)擊說(shuō)明文字即可選擇/取消勾選狀態(tài)

php不使用插件導(dǎo)出excel的簡(jiǎn)單方法

win10預(yù)覽版10147新特性演示視頻

php Imagick獲取圖片RGB顏色值

php文字水印和php圖片水印實(shí)現(xiàn)代碼(二種加水印方法)

總結(jié)

以上是生活随笔為你收集整理的php对表格的处理,JavaScript_js处理表格对table进行修饰，js处理表格 1、行颜色间隔显示 - phpStudy...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。