javascript實(shí)現(xiàn)table表格隔行變色的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)table表格隔行變色的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table間隔色</title>
<script type="text/javascript">
function SetTableColor() {
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var j = i + 1;
if (j % 2 == 0) { //偶數(shù)行
trs[i].style.background = "yellow";
}
else {
trs[i].style.background = "blue";
}
}
}
</script>
</head>
<body onload="SetTableColor()">
<table id="tblMain" border="1">
<tr>
<td>1</td>
<td>三星</td>
<td>AA</td>
</tr>
<tr>
<td>2</td>
<td>Norkia</td>
<td>BB</td>
</tr>
<tr>
<td>3</td>
<td>蘋果</td>
<td>CC</td>
</tr>
<tr>
<td>4</td>
<td>聯(lián)想</td>
<td>DD</td>
</tr>
<tr>
<td>5</td>
<td>小米</td>
<td>EE</td>
</tr>
<tr>
<td>6</td>
<td>HTC</td>
<td>FF</td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- JS控制表格隔行變色
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- 一個(gè)簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)
- javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- 用JS控制表格的逐行變色的表單
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- js兼容標(biāo)準(zhǔn)的表格變色效果
- JS實(shí)現(xiàn)表格隔行變色
相關(guān)文章
javascript appendChild,innerHTML,join性能比較代碼
在實(shí)際應(yīng)用中,應(yīng)該避免直接用innerHTML,對于大量的字符連接運(yùn)算,應(yīng)該考慮先運(yùn)算再輸出。2009-08-08
微信小程序navigator跳轉(zhuǎn)及參數(shù)傳遞的方法
這篇文章主要介紹了微信小程序navigator跳轉(zhuǎn)及參數(shù)傳遞,在navigator中添加需要跳轉(zhuǎn)的路徑,如果需要帶參,則在路徑后面添加所要傳遞的參數(shù)以及值,需要的朋友可以參考下2023-11-11
javascript鼠標(biāo)滑過顯示二級(jí)菜單特效
這篇文章主要為大家詳細(xì)介紹了javascript鼠標(biāo)滑過顯示二級(jí)菜單特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)方法,需要的朋友參考下吧2017-09-09
微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
JS使用Prim算法和Kruskal算法實(shí)現(xiàn)最小生成樹
這篇文章主要為大家詳細(xì)介紹了JS使用Prim算法和Kruskal算法實(shí)現(xiàn)最小生成樹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項(xiàng)目開發(fā)中肯定會(huì)遇到同步異步執(zhí)行的問題,這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12

