js如何實現動態顯示表格數據（點奇數顯示奇數單元格內容）

一、總結

一句話總結：

1、動態指定表格中每個單元格的id，然后通過id可以獲取每個單元格，然后對里面的innerHTML進行賦值。

2、弄了一個數組，先把要賦值給單元格的innerHTML的數據存到數組里面，然后從數組里面批量賦值給單元格的innerHTML。

3、寫了一個便於通過id獲取元素element的函數。

1、html標簽可以通過各種屬性值來傳參么？

解答：可以，html標簽可以通過各種屬性（例如id，value等）來傳參，或者是區別不同元素，因為屬性可以動態添加啊。

2、html如何動態指定元素的id屬性（除了常規方法）？

解答：通過父親的innerHTML屬性，標簽的那個語句加個id屬性倒是很容易的。 str_tab+='<td id='+"td"+(i*5+j+1)+' >'+'</td>'

3、js中創建數組的兩種方法？

解答：Array()對象和[]。var arr=new Array(); var arr=[]等效上句

4、js自定義的通過id獲取element的函數怎么寫？

解答：function $(x){ return document.getElementById(x); } 。

5、html中的標簽中的事件（比如點擊事件）調用的函數如何傳參？

解答：直接將參數寫進函數即可，比如整形和字符串，字符串加引號，單雙引號都行。onclick="td_num('odd')"。function td_num(x){}

二、js如何實現動態顯示表格數據

1、動態改變表格數據顯示案例描述

實例描述：
根據用戶的選擇表格中顯示不同的數據

2、截圖

3、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文檔</title>
 6     <style type="text/css">
 7     </style>
 8 </head>
 9 <body>
10 <h3>動態顯示表格數據</h3>
11 <table style="width: 300px;height: 300px;border: 3px solid green;text-align: center;">
12     <script>
13         for(var i=0;i<5;i++){
14             str_tab='<tr>'
15             for(var j=0;j<5;j++){
16                 str_tab+='<td id='+"td"+(i*5+j+1)+' style="background: orange;">'+'</td>'
17             }
18             str_tab+='</tr>'
19             document.write(str_tab)
20         }
21     </script>
22 </table>
23 <input type="button" value="奇數" onclick="td_num('odd')">
24 <input type="button" value="偶數" onclick="td_num('even')">
25 <input type="button" value="全部" onclick="td_num('all')">
26 <script type="text/javascript">
27     var arr=new Array();
28     // var arr=[]等效上句
29     function $(x){
30         return document.getElementById(x);
31     }
32     for(var i=0;i<25;i++){
33         arr[i]=i+1;
34     }
35     // alert(arr)
36     function write(){
37         for(var i=0;i<25;i++){
38  $("td"+(i+1)).innerHTML=arr[i] 39         }
40     }
41     function td_num(x){
42         switch (x){
43             case 'odd':
44                 for(var i=0;i<25;i++){
45                     if(i%2==0){
46                         arr[i]=i+1;
47                     }else{arr[i]=""}
48                 }
49                 break;
50                 case 'even':
51                 for(var i=0;i<25;i++){
52                     if(i%2==1){
53                         arr[i]=i+1;
54                     }else{arr[i]=""}
55                 }
56                 break;
57                 case 'all':
58                 for(var i=0;i<25;i++){
59                         arr[i]=i+1;
60                 }
61                 break;
62         }
63         write()
64     }
65 </script>
66 </body>
67 </html>

三、測試題-簡答題