html中jquery创建表格,jQuery动态生成表格

描述：当用户点击添加数据的时候，表格的内容会自动添加，点击之前，只有表头吗，没有内容，内容是从服务器中取到的。所有jQuery版本是1.8.

示例代码：

动态创建表格

table {

width: 500px;

border-collapse: collapse;

border-spacing: 0;

border: 1px solid #c0c0c0;

}

th, td {

border: 1px solid #d0d0d0;

color: #404060;

padding: 10px;

}

th {

background-color: #09c;

font: bold 16px "微软雅黑";

color: #fff;

}

td {

font: 14px "微软雅黑";

}

tbody tr {

background-color: #f0f0f0;

}

tbody tr:hover {

cursor: pointer;

background-color: #fafafa;

}

$(function () {

//模拟从后台拿到的数据

var data = [{

name:"孙肖宁",

age:"20",

hobby:"编程"

},{

name:"小宁",

age:"22",

hobby:"读书"

}, {

name:"小宁博客",

age:"22",

hobby:"读书"

}];

$("#j_btnGetData").click(function () {

var ele = $("#j_tbData");

add(ele,data);

});

});

function add(ele,data) {

var arr = [];

for (var i = 0;i

arr.push("

"+data[i].name+""+data[i].age+""+data[i].hobby+"");

}

var str = arr.toString();

ele.html(str);

}

姓名年龄爱好