jQuery 根据JSON数据动态生成表格
2016-03-09 16:46
661 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>动态创建表格</title> <script src="js/jQuery1.10.js"></script> <script type="text/javascript"> function CreateTable() { var str = '{ "total": 149, "columns": [{ "field": "EMPLOYEEID", "title": "员工编号" }, { "field": "EMPLOYEENAME", "title": "员工姓名" }],"rows":[{"EMPLOYEEID":"001","EMPLOYEENAME":"小明"},{"EMPLOYEEID":"002","EMPLOYEENAME":"小宏"}]}'; var data = JSON.parse(str); var rowCount = data.rows.length; var cellCount = data.columns.length; var table = $("<table border=\"1\">"); table.appendTo($("#createtable")); var trHeader = $("<tr></tr>"); trHeader.appendTo(table); for (var j = 0; j < cellCount; j++) { var td = $("<td>" + data.columns[j].title + "</td>"); td.appendTo(trHeader); } for (var i = 0; i < rowCount; i++) { var tr = $("<tr></tr>"); tr.appendTo(table); for (var j = 0; j < cellCount; j++) { var field = data.columns[j].field; var val=""; if (data.rows[i][field] != null) { val = data.rows[i][field]; } var td = $("<td>" + val + "</td>"); td.appendTo(tr); } } $("#createtable").append("</table>"); } </script> </head> <body> <input type="button" value="添加表格" onclick="CreateTable(5,6)"> <input type="button" value="添加行"> <div id="createtable"></div> <div id="createrow"></div> </body> </html>
相关文章推荐
- Ajax
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- jquery checkbox 全选 全不选 反选
- HTML5:多文件上传 Upload multiple files at once with HTML5, jQuery and PHP
- jQuery全屏滚动插件fullPage.js
- jQuery的动画效果
- php ajax json jquery 记录
- jquery如何判断checkbox(复选框)是否被选中
- jQuery操作select下拉框的text值和value值的方法
- <学习笔记> jQuery.extend 函数详解
- jQuery父级以及同级元素查找介绍
- jquery学习笔记--基础介绍
- HTML--10Jquery
- jquery 和 js 如何获取单选框的值
- 添加jquery脚本文件
- 亲手用模块化方式写一个jquery QQ表情插件。
- jquery 验证注册的代码
- Jquery的img附加在UL下以及img附加在div下
- js/jquery使用过程遇到的问题
- Jquery.Datatables 结合时间段查询,daterangepicker实现Datatables表格带参数查询