這篇文章主要介紹了JavaScript動態添加列的方法,實例分析了javascript操作table表單的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript動態添加列的方法。分享給大家供大家參考。具體實現方法如下：

1. /***  
2. * 動態添加table 列  
3. * @param result  
4. */ 
5. function addRow(resultJson){  
6. /* var temp = [];  
7. temp = $.grep(arr, function(val, key) {  
8. if(val.indexOf('c') != -1)  
9. return true;  
10. // 如果[invert]參數不給或為false, $.grep只收集回調函數返回true的數組元素  
11. // 反之[invert]參數為true, $.grep收集回調函數返回false的數組元素  
12. }, false);  
13. console.dir(temp);  
14. */ 
15. if(resultJson!=""){  
16. var cv_arr=new Array();  
17. var date_arr = new Array();  
18. //將數據源解析，并解析成程序可認的date及result  
19. $.each(resultJson, function(index, val) {  
20. if(val['parser_schedule']!=null){  
21. cv_arr.push(val['parser_schedule']);  
22. var temp_data =val['parser_schedule'].split(",");  
23. for(i=0;i<temp_data.length;i++){  
24. var temp = temp_data[i].split(":");  
25. date_arr.push(temp[0]);  
26. }  
27. }  
28. });  
29. date_arr = unique(date_arr);  
30. date_arr.in_arr = function(value) {  
31. var a = this; 
32. //為了增加方法擴展適應性。我這稍微修改了下  
33. for (var i = 0; i < a.length; i++) {  
34. if (a[i] == value)  
35. return i;  
36. }  
37. }  
38. //ARR下標值從0開始  
39. var old_td_n = $("#mytable thead tr").find("th").length; 
40. //獲取已有的TH  
41. //設置TH信息  
42. for(i=0;i<date_arr.length;i++){  
43. //注意TH和TD,樣式不一樣  
44. $("#mytable thead tr").append("<th>"+date_arr[i]+"</th>");  
45. $("#mytable tbody tr").append("<td>-</td>");  
46. }  
47. var rowNum_arr=new Array();  
48. //獲取一共有多少行  
49. for(i=0;i<$("#mytable").find("tr").length;i++){  
50. //獲取每一行中第三列的值，table前兩列隱藏，第三列開始判斷是否有數據  
51. var str=$("#mytable tbody").find("tr").eq(i);  
52. var std=str.find("td").eq(2);  
53. //當沒有值的時候記錄，獲取行號  
54. if($.trim(std.text()).length <1){  
55. rowNum_arr.push(i);  
56. }else{  
57. // $(std).html("");  
58. }  
59. }  
60. //設置TD信息  
61. for(i=0;i<cv_arr.length;i++){  
62. //獲取RESULT_ARR中的日期數據  
63. var temp_str = cv_arr[i];//OK  
64. //將日期數據用","分割成數組  
65. var temp_arr = temp_str.split(",");//OK [03-11:10,03-12:9,03-13:8,03-14:15]  
66. for(j=0;j<temp_arr.length;j++){  
67. //獲取數據集 為字符串例如03-11:10  
68. var temp_result = temp_arr[j];  
69. /*  
70. 將數據集分割為數組[03-11:10]  
71. ARR[0] 03-11  
72. ARR[1] 10  
73. */ 
74. var temp_result_arr = temp_result.split(":"); 
75. //設置第I行的TR里的內容  
76. $("#mytable tbody").find("tr").eq(rowNum_arr[i]).find("td").eq(old_td_n+date_arr.in_arr(temp_result_arr[0])).html(temp_result_arr[1]);  
77. // 應用樣式  
78. $("#tb tr:even td").addClass("alt");//行的顏色  
79. $("#tb tr").find("td:eq(2)").addClass("spec");  
80. $("#tb tr:even").find("td:eq(2)").addClass("specalt");  
81. }  
82. }  
83. }  
84. } 

希望本文所述對大家的javascript程序設計有所幫助。