java 重置表格内容_Jquery创建表格、填充表格数据、重置表格

1.Jquery创建表格

/**

* 创建表格

* @param label 标题

* @param data 数据

* @param tableElement html元素，表格插入至此元素中

*/

function createTable(label, data, tableElement) {

//创建表格

var table = $("

");

//也可以为元素对象设定id,class等属性.

/*var 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.css({

border: "1px solid #d0d0d0",

height: "30px",

color: "#FFF",

background: "#37b5ad"

});

$.each(label, function (index, value) {

var th = $("

" + value + "");

th.appendTo(tr);

});

tr.appendTo(table);

$.each(data, function (index, row) {

//数据行

var tr = $("

");

//数据列

$.each(row, function (key, value) {

//console.info(key + ":" + value);

var td = $("

" + value + "");

td.css({

border: "1px solid #d0d0d0",

height: "24px"

});

td.appendTo(tr);

});

tr.appendTo(table);

});

table.appendTo(tableElement);

}

附：label和data的数据结构

//label.json

['事项编码','事项名称']

//data.json

[{"code":"44530200","name":"办理《计划生育情况证明》"},

{"code":"44530200","name":"申请《再生育一胎子女审批》"},

{"code":"44530200","name":"办理《符合政策生育一孩登记》"},

{"code":"44530200","name":"办理《流动人口婚育证明》"}]

2.Jquery填充表格数据

function fill_table_data() {

//table

var table = $("#tableId");

// 通过嵌套了table的元素id获取table对象

// 例如：

//var table = $("#contain_table_elementId").find("table");

// row cell 从1开始

$("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列');

$("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列');

}

填充表格数据前提是：已经创建好了html表格行列元素。

如：table.html

第1列	第2列	第3列	第4列	第5列
第2行
第3行

3.Jquery添加(删除)表格行列

多用于动态表格，即表格的数据行列非固定，ajax填充数据。

注意：因为这里是重置表格，所以删除了除第一行(表头行)的所有行，然后再添加数据行。

//如果不删除原表格数据，那么只会追加新数据行，而不是覆盖。

function rest_table_data() {

var table = $("#tableId");

//删除原有表格数据

table.find("tr").each(function(i){

if(i != 0){

//表头不删

this.remove();

}

});

//添加行列数据

$.get('table_data.json', function (data) {

// row cell 从1开始，因为明确知道数据是12行，所以i<12

for (var i = 0; i < 12; i++) {

//数据行

var tr = $("

", {

align: "center",

height: "36"

});

//数据列

$.each(data, function (key, value) {

var td = $("

" + value[i] + "");

td.appendTo(tr);

if (key == "column_4") {

//这一列的数据，要指定样式

td.attr("class","td2");

}

});

tr.appendTo(table);

}

});

}

附：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%"]}