JavaScript例子2-使一個特定的表格隔行變色

-s pre ble asc nbsp char head blog size

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             /*window.onload = function() {
 8                 var item = document.getElementById("tb");
 
 9                 var tbody = document.getElementsByTagName("tbody");錯誤
10                 var trs =   tbody.getElementsByTagName("tr");
11                 for(var i = 0; i < trs.length; i++) {
12                     if(i%2==0){
13                         trs[i].style.backgroundColor="greenyellow";
 
14                     }
15                 }
16 
17             };*/
18             window.onload = function(){ //頁面所有元素加載完畢
19                 var item  =  document.getElementById("tb");            //獲取id為tb的元素(table)
20                 var tbody =  item.getElementsByTagName("tbody")[0];    //獲取表格的第一個tbody元素 

21                 var trs =   tbody.getElementsByTagName("tr");          //獲取tbody元素下的所有tr元素
22                 for(var i=0;i < trs.length;i++){//循環tr元素
23                         if(i%2==0){        //取模. (取余數.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
24                             trs[i].style.backgroundColor = "#888"; // 改變 符合條件的tr元素 的背景色.
25                         }
26                 }
27                 
28             }
29         </script>
30     </head>
31     <body>
32         <table id="tb">
33     <tbody>
34         <tr><td>第一行</td><td>第一行</td></tr>
35         <tr><td>第二行</td><td>第二行</td></tr>
36         <tr><td>第三行</td><td>第三行</td></tr>
37         <tr><td>第四行</td><td>第四行</td></tr>
38         <tr><td>第五行</td><td>第五行</td></tr>
39         <tr><td>第六行</td><td>第六行</td></tr>
40     </tbody>
41 </table>
42     </body>
43 </html>

JavaScript例子2-使一個特定的表格隔行變色

JavaScript例子2-使一個特定的表格隔行變色

JavaScript for迴圈實現表格隔行變色

js基礎知識示例2----表格隔行變色

表格隔行變色

js控制表格隔行變色

table表格隔行變色

js實現表格隔行變色和滑鼠移入高亮

分別使用js和JQuery實現簡單的表格隔行變色以及高亮顯示

js實現簡單的表格隔行變色以及高亮顯示

表格隔行變色功能（原生JS和jequery 程式碼）

php迴圈控制打印表格隔行變色的兩種方法

建立動態表格（節點建立以及表格隔行變色）

javascript 表格隔行換色

JavaScript-表格隔行換色·滑鼠上移換色·合併顯示

利用jQuery實現表格的隔行變色、高亮顯示

Vue.js 的一個小技巧---利用v-for中的index值，來實現隔行變色

JQuery案例一：實現表格隔行換色

製作隔行變色的表格

js表格中的DOM操作之隔行變色，滑鼠進入當前行高亮

使用jQuery完成表格隔行換色

JavaScript例子2-使一個特定的表格隔行變色

相關推薦