下面要给大家介绍的就是jquery方面的知识，你知道jquery动态创建表格的方法吗?对这个方面不大清楚的小伙伴一定要看一下下面的文章内容哦。
实现方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-jQuery-动态创建表格案例</title>
<script src="jquery-1.11.3.js"></script>
<style>
* { padding: 0; margin: 0; }
table {
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;
}
</style>
<script>
var data = [{
name: "传智播客",
url: "http://www.itcast.cn",
type: "IT最强培训机构"
},{
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
},{
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
$(function(){
//第一种：动态创建表格的方式，使用拼接html的方式 （推荐）
// var html = "";
// for( var i = 0; i < data.length; i++ ) {
// html += "
<tr>";
// html += "
<td>" + data[i].name + "</td>"
// html += "
<td>" + data[i].url + "</td>"
// html += "
<td>" + data[i].type + "</td>"
// html += "
</tr>";
// }
// $("#J_TbData").html(html);
//第二种： 动态创建表格的方式，使用动态创建dom对象的方式
//清空所有的子节点
$("#J_TbData").empty();
//自杀
// $("#J_TbData").remove();
for( var i = 0; i < data.length; i++ ) {
//动态创建一个tr行标签,并且转换成jQuery对象
var $trTemp = $("
<tr></tr>");
//往行里面追加 td单元格
$trTemp.append("
<td>"+ data[i].name +"</td>");
$trTemp.append("
<td>"+ data[i].url +"</td>");
$trTemp.append("
<td>"+ data[i].type +"</td>");
// $("#J_TbData").append($trTemp);
$trTemp.appendTo("#J_TbData");
}
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明</th>
</tr>
</thead>
<tbody id="J_TbData"></tbody>
</table>
<br>
<!-- 整个表格：ｔａｂｌｅ -->
<table>
<thead>
<tr>
<!-- tr：table row：表格的行 -->
<th>一个格</th>
<th>一个格</th>
<th>一个格</th>
</tr>
</thead>
<tbody>
<tr>
<!-- rowspan:跨度两个行 -->
<td rowspan="2">一个格</td>
<!-- clospan：跨度两个列 -->
<td colspan="2">一个格</td>
<!-- <td>一个格</td> -->
</tr>
<tr>
<!-- <td>sd</td> -->
<td>ss</td>
<td>ss</td>
</tr>
</tbody>
</table>
</body>
</html>
以上内容源于网络仅供参考，更多和jquery相关的内容，请继续通过关注奇Q工具网的常见问题栏目来了解吧。
推荐阅读：