jquery table 元素操作-創建|數據填充|重置|隱藏行 ...
1.Jquery創建表格
/** * 創建表格 * @param label 標題 json格式，數據結構見附錄1 * @param data 數據 json格式，數據結構見附錄1 * @param parentElement html元素，表格插入至此元素中 */ function createTable(label, data, parentElement) { //創建表格 var table = $("<table> </table>"); //也可以為元素對象設定id,class等屬性. /*var table = $("<table>",{ "id" : "tableId", "class" : "table_class" });*/ //設定樣式 table.css({ width: "98%", "border-collapse": "collapse", border: "0px solid #d0d0d0", margin: "3px", "font-size": "14px" }); //標題行 var tr = $("<tr></tr>"); tr.css({ border: "1px solid #d0d0d0", height: "30px", color: "#FFF", background: "#37b5ad" }); $.each(label, function (index, value) { var th = $("<th>" + value + "</th>"); th.appendTo(tr); }); tr.appendTo(table); $.each(data, function (index, row) { //數據行 var tr = $("<tr></tr>"); //數據列 $.each(row, function (key, value) { //console.info(key + ":" + value); var td = $("<td>" + value + "</td>"); td.css({ border: "1px solid #d0d0d0", height: "24px" }); td.appendTo(tr); }); tr.appendTo(table); }); table.appendTo(parentElement); }createTable
附錄 1：label和data的數據結構
//label.json ['事項編碼','事項名稱'] //data.json [{"code":"44530200","name":"辦理《計劃生育情況證明》"}, {"code":"44530200","name":"申請《再生育一胎子女審批》"}, {"code":"44530200","name":"辦理《符合政策生育一孩登記》"}, {"code":"44530200","name":"辦理《流動人口婚育證明》"}]
2.Jquery填充表格數據
請註意，填充表格數據前提是：已經創建好了html表格行列元素。
/** *填充表格數據前提是：已經創建好了html表格行列元素。 * *如：第4行第5列不存在時，會出錯。 *表格的html頁面示例代碼，見附錄2. */ function fillTableData() { //table var table = $("#tableId"); // 也可以通過嵌套了table的元素id獲取table對象 // 例如：<div id="contain_table_elementId"><table></table></div> //var table = $("#contain_table_elementId").find("table"); // row cell 從1開始計數，第1行是表頭，這裡從第2行開始填充 $("tr:nth-child(2) td:nth-child(2)", table).html('第2行第2列'); $("tr:nth-child(2) td:nth-child(3)", table).html('第2行第3列'); $("tr:nth-child(2) td:nth-child(4)", table).html('第2行第4列'); $("tr:nth-child(2) td:nth-child(5)", table).html('第2行第5列'); //第3行 $("tr:nth-child(3) td:nth-child(2)", table).html('第3行第2列'); $("tr:nth-child(3) td:nth-child(3)", table).html('第3行第3列'); $("tr:nth-child(3) td:nth-child(4)", table).html('第3行第4列'); $("tr:nth-child(3) td:nth-child(5)", table).html('第3行第5列'); //第4行第5列不存在，你猜會發生什麼? //$("tr:nth-child(4) td:nth-child(5)", table).html('第4行第5列'); }
附錄2 table.html
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr align="center" height="36" class="tr1"> <td class="td1">第1列</td> <td class="td1">第2列</td> <td class="td1">第3列</td> <td class="td1">第4列</td> <td class="td1">第5列</td> </tr> <tr align="center" height="36"> <td>第2行</td> <!-- td-第2行已創建，你可以為其填充數據 --> <td></td> <td></td> <td ></td> <td class="td2" ></td> </tr> <tr align="center" height="36"> <td>第3行</td> <td ></td> <td ></td> <td ></td> <td class="td2"></td> </tr> </table>table.html
3.Jquery添加(刪除)表格行列
多用於動態表格，即表格的數據行列非固定，ajax填充數據。
註意：因為這裡是重置表格，所以刪除了除第一行(表頭行)的所有行，然後再添加數據行。
//如果不刪除原表格table的行row和列cell，那麼只會追加新數據行，而不是覆蓋。
function rest_table_data() { var table = $("#tableId"); //刪除原有表格行 table.find("tr").each(function(i){ if(i != 0){ //表頭不刪 this.remove(); } }); //添加行列數據,table_data.json 見附錄3 $.get('table_data.json', function (data) { // row cell 從1開始，因為明確知道數據是12行，所以i<12 for (var i = 0; i < 12; i++) { //數據行 var tr = $("<tr>", { align: "center", height: "36" }); //數據列 $.each(data, function (key, value) { var td = $("<td>" + value[i] + "</td>"); td.appendTo(tr); if (key == "column_4") { //這一列的數據，要指定樣式 td.attr("class","td2"); } }); tr.appendTo(table); } }); }
附錄3 table_data.json
//按列 {"column_1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], "column_2":[1858,2120,3466,3513,3829,3035,2934,2761,2576,1635,0,0], "column_3":[0,0,1,46,86,69,102,82,118,61,0,0], "column_4":[0,0,0,39,44,59,101,81,101,57,0,0], "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%"]}
4.Jquery隱藏表格行
重點：Jquery隱藏表格行時，要使用<tbody></tbody>標簽包裹需要隱藏的<tr></tr>，不然會破壞樣式。
Html示例：
<!-- 註意用tbody,不然會破壞表格樣式 -->
<tbody id="${rowId}" style="display: none" class="tableRow">
<tr>
<td valign="top" class="title">內容：</td>
<td height="100" valign="top" colspan="4">
<textarea name="option" class="textarea" readonly="readonly">我這行需要隱藏</textarea>
</td>
</tr>
</tbody>
Jquery示例：敬請期待
未完，待續...
