1.Jquery创建表格
1/** 2 * 创建表格 3 * @param label 标题 4 * @param data 数据 5 * @param tableElement html元素，表格插入至此元素中 6 */ 7function createTable(label, data, tableElement) { 8 //创建表格 9 var table = $("<table> </table>"); 10 //也可以为元素对象设定id,class等属性. 11 /*var table = $("<table>",{ 12 "id" : "tableId", 13 "class" : "table_class" 14 });*/ 15 //设定样式 16 table.css({ 17 width: "98%", 18 "border-collapse": "collapse", 19 border: "0px solid #d0d0d0", 20 margin: "3px", 21 "font-size": "14px" 22 }); 23 //标题行 24 var tr = $("<tr></tr>"); 25 tr.css({ 26 border: "1px solid #d0d0d0", 27 height: "30px", 28 color: "#FFF", 29 background: "#37b5ad" 30 }); 31 $.each(label, function (index, value) { 32 var th = $("<th>" + value + "</th>"); 33 th.appendTo(tr); 34 }); 35 tr.appendTo(table); 36 37 $.each(data, function (index, row) { 38 //数据行 39 var tr = $("<tr></tr>"); 40 //数据列 41 $.each(row, function (key, value) { 42 //console.info(key + ":" + value); 43 var td = $("<td>" + value + "</td>"); 44 td.css({ 45 border: "1px solid #d0d0d0", 46 height: "24px" 47 }); 48 td.appendTo(tr); 49 }); 50 tr.appendTo(table); 51 }); 52 table.appendTo(tableElement); 53}
附：label和data的数据结构
1//label.json 2['事项编码','事项名称'] 3 4//data.json 5[{"code":"44530200","name":"办理《计划生育情况证明》"}, 6{"code":"44530200","name":"申请《再生育一胎子女审批》"}, 7{"code":"44530200","name":"办理《符合政策生育一孩登记》"}, 8{"code":"44530200","name":"办理《流动人口婚育证明》"}]
2.Jquery填充表格数据
1function fill_table_data() { 2 //table 3 var table = $("#tableId"); 4 // 通过嵌套了table的元素id获取table对象 5 // 例如：<div id="contain_table_elementId"><table></table></div> 6 //var table = $("#contain_table_elementId").find("table"); 7 8 // row cell 从1开始 9 $("tr:nth-child(2) td:nth-child(2)", table).html('第2行第2列'); 10 $("tr:nth-child(2) td:nth-child(3)", table).html('第2行第3列'); 11 $("tr:nth-child(2) td:nth-child(4)", table).html('第2行第4列'); 12 $("tr:nth-child(2) td:nth-child(5)", table).html('第2行第5列'); 13 $("tr:nth-child(3) td:nth-child(2)", table).html('第3行第2列'); 14 $("tr:nth-child(3) td:nth-child(3)", table).html('第3行第3列'); 15 $("tr:nth-child(3) td:nth-child(4)", table).html('第3行第4列'); 16 $("tr:nth-child(3) td:nth-child(5)", table).html('第3行第5列'); 17 //第4行第5列不存在，你猜会发生什么? 18 //$("tr:nth-child(4) td:nth-child(5)", table).html('第4行第5列'); 19 20}
填充表格数据前提是：已经创建好了html表格行列元素。
如：table.html
1<table width="100%" border="0" cellspacing="0" cellpadding="0"> 2 <tr align="center" height="36" class="tr1"> 3 <td class="td1">第1列</td> 4 <td class="td1">第2列</td> 5 <td class="td1">第3列</td> 6 <td class="td1">第4列</td> 7 <td class="td1">第5列</td> 8 </tr> 9 <tr align="center" height="36"> 10 <td>第2行</td> 11 <!-- td-第2行第2列已创建，你可以为其填充数据 --> 12 <td></td> 13 <td></td> 14 <td ></td> 15 <td class="td2" ></td> 16 </tr> 17 <tr align="center" height="36"> 18 <td>第3行</td> 19 <td ></td> 20 <td ></td> 21 <td ></td> 22 <td class="td2"></td> 23 </tr> 24 </table>
3.Jquery添加(删除)表格行列
多用于动态表格，即表格的数据行列非固定，ajax填充数据。
注意：因为这里是重置表格，所以删除了除第一行(表头行)的所有行，然后再添加数据行。
//如果不删除原表格数据，那么只会追加新数据行，而不是覆盖。
1function rest_table_data() { 2 3 var table = $("#tableId"); 4 //删除原有表格数据 5 table.find("tr").each(function(i){ 6 if(i != 0){ 7 //表头不删 8 this.remove(); 9 } 10 }); 11 12 //添加行列数据 13 $.get('table_data.json', function (data) { 14 // row cell 从1开始，因为明确知道数据是12行，所以i<12 15 for (var i = 0; i < 12; i++) { 16 //数据行 17 var tr = $("<tr>", { 18 align: "center", 19 height: "36" 20 }); 21 //数据列 22 $.each(data, function (key, value) { 23 var td = $("<td>" + value[i] + "</td>"); 24 td.appendTo(tr); 25 if (key == "column_4") { 26 //这一列的数据，要指定样式 27 td.attr("class","td2"); 28 } 29 }); 30 tr.appendTo(table); 31 } 32 }); 33}
附：table_data.json
1//按列 2{"column_1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], 3"column_2":[1858,2120,3466,3513,3829,3035,2934,2761,2576,1635,0,0], 4"column_3":[0,0,1,46,86,69,102,82,118,61,0,0], 5"column_4":[0,0,0,39,44,59,101,81,101,57,0,0], 6"column_5":["0.0%","0.0%","0.0%","85.0%","51.0%","86.0%","99.0%","99.0%","86.0%","93.0%","0.0%","0.0%"]}