基于JavaScript實現(xiàn)表格隔行換色
表格隔行換色
需求分析
我們商品分類的信息太多，如果每一行都顯示同一個顏色的話會讓人看的眼花，為了提高用戶體驗，減少用戶看錯的情況，需要對表格進(jìn)行隔行換色
技術(shù)分析
table對象 集合 cells[]：返回包含表格中所有單元格的一個數(shù)組。 rows[]：返回包含表格中所有行的一個數(shù)組。 tBodies[]：返回包含表格中所有tbody 的一個數(shù)組。
步驟分析
確定事件: 文檔加載完成 onload 2. 事件要觸發(fā)函數(shù): init() 3. 函數(shù):操作頁面的元素 要操作表格中每一行 動態(tài)的修改行的背景顏色代碼實現(xiàn)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script > function init(){ //得到表格 var tab = document.getElementById('tab'); //得到表格中每一行 var rows = tab.rows; //便利所有的行,然后根據(jù)奇數(shù) 偶數(shù) for(var i=1; i < rows.length; i++){var row = rows[i]; //得到其中的某一行if(i%2==0){ row.bgColor = 'yellow';}else{ row.bgColor = 'red'} } } </script></head><body onload='init()'><table border='1px' id='tab'> <tr> <td> <input type='checkbox'/> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td> <input type='checkbox'/> </td> <td>1</td> <td>手機數(shù)碼</td> <td>華為,小米,尼康</td> <td>黑馬數(shù)碼產(chǎn)品質(zhì)量最好</td> <td> <a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >修改</a>|<a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >刪除</a> </td> </tr> <tr> <td> <input type='checkbox'/> </td> <td>2</td> <td>成人用品</td> <td>充氣的</td> <td>這里面的充氣電動硅膠的</td> <td><a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >修改</a>|<a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >刪除</a></td> </tr> <tr> <td> <input type='checkbox'/> </td> <td>3</td> <td>電腦辦公</td> <td>聯(lián)想,小米</td> <td>筆記本特賣</td> <td><a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >修改</a>|<a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >刪除</a></td> </tr> <tr> <td> <input type='checkbox'/> </td> <td>4</td> <td>饞嘴零食</td> <td>辣條,麻花,黃瓜</td> <td>年貨</td> <td><a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >修改</a>|<a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >刪除</a></td> </tr> <tr> <td> <input type='checkbox'/> </td> <td>5</td> <td>床上用品</td> <td>床單,被套,四件套</td> <td>都是套子</td> <td><a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >修改</a>|<a href='http://www.gepszalag.com/bcjs/16677.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >刪除</a></td> </tr></table></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Docker究竟是什么 為什么這么流行 它的優(yōu)點和缺陷有哪些？2. ASP.NET MVC實現(xiàn)城市或車型三級聯(lián)動3. Python使用Pyqt5實現(xiàn)簡易瀏覽器(最新版本測試過)4. Element ui tree(樹)實現(xiàn)父節(jié)點選中時子節(jié)點不選中父節(jié)點取消時子節(jié)點自動取消功能5. 如何在.net6webapi中使用自動依賴注入6. 用python登錄帶弱圖片驗證碼的網(wǎng)站7. 如何使用瀏覽器擴展篡改網(wǎng)頁中的JS 文件8. .NET 6實現(xiàn)滑動驗證碼的示例詳解9. python軟件測試Jmeter性能測試JDBC Request(結(jié)合數(shù)據(jù)庫)的使用詳解10. java實現(xiàn)彈球小游戲
網(wǎng)公網(wǎng)安備