JavaScript动态添加列的方法

这篇文章主要介绍了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程序设计有所帮助。