初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table
小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有明显的分工,使用传统的WebFrom开发模式,一个Button都要返回服务器处理一次,服务器说它觉得很累。
而我最近由于公司有很多很紧急的任务交给我,所以之前说的那个个人博客暂停了一下。由于我想尽量减轻服务器负担,尽量让一些逻辑在浏览器端完成,浏览器端与服务器之间仅有数据交换,尽可能地把逻辑留给浏览器端处理。显然,js的强大之处就显示出来了——当然,使用jquery框架也不错,但是我希望使用原生js,这样能达到深入理解的效果。
我的目的是根据服务器端返回的json数据来动态生成一个table,二话不说,马上上代码,代码里也有注释,相信各位看官能看懂。
动态生成table
/*
createTable(toid, jsondata, check, edit, del):用于动态创建table,第0行为表头,数据里必须包含表头和数据的id
@toid:创建table到id为toid的节点下
@jsondata:用于创建table的json格式的数据(须在jsondata里包含表头标题)
@check:是否创建查看按钮
@edit:是否创建编辑按钮
@del:是否创建删除按钮
*/
function createTable(toid, jsondata, check, edit, del) {
var table = document.createElement("table");
var tr, td;
for (i in jsondata) {
tr = document.createElement("tr"); //创建tr
//________________创建表头________________________________________
if (i == 0) {
for (j in jsondata[i]) { //根据数据在tr内创建td
td = document.createElement("td");
td.appendChild(document.createTextNode(jsondata[i][j]));
if (j == "id") { //创建隐藏的td来存放id
td.style.display = "none";
}
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (check == true) { //创建查看按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("查看"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (edit == true) { //创建编辑按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("编辑"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (del == true) { //创建删除按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("删除"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
}
//________________创建数据行________________________________________
else {
for (j in jsondata[i]) { //根据数据在tr内创建td
td = document.createElement("td");
td.appendChild(document.createTextNode(jsondata[i][j]));
if (j == "id") { //创建隐藏的td来存放id
td.style.display = "none";
}
tr.appendChild(td);
}
if (check == true) { //创建查看按钮
td = document.createElement("td");
var btnCheck = document.createElement("button");
btnCheck.appendChild(document.createTextNode("查看"));
td.appendChild(btnCheck);
tr.appendChild(td);
}
if (edit == true) { //创建编辑按钮
td = document.createElement("td");
var btnEdit = document.createElement("button");
btnEdit.appendChild(document.createTextNode("编辑"));
td.appendChild(btnEdit);
tr.appendChild(td);
}
if (del == true) { //创建删除按钮
td = document.createElement("td");
var btnDel = document.createElement("button");
btnDel.appendChild(document.createTextNode("删除"));
td.appendChild(btnDel);
tr.appendChild(td);
}
}
table.appendChild(tr);
}
document.getElementById(toid).appendChild(table);
}
动态生成table
这是我定义的一个js方法,怎么调用也在开头有说明,必须传入json格式的数据,否则出错。
下面再给这个table定义一个样式,使它看起来好看一些。
table样式
table
{
padding: 0;
margin: 0;
border-collapse: collapse;
}
td
{
border: 1px solid #009999;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
}
td button
{
font-size:12px;
}
table样式
好了,现在我们做一个demo测试一下它的效果,为了简单起见,我就不写服务器端返回json数据了,直接在浏览器端定义一个json格式的数据,也把js和css全写在html页面上(不推荐这种做法,这里只是为了简单起见)。
动态生成table的demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table
{
padding: 0;
margin: 0;
border-collapse: collapse;
} td
{
border: 1px solid #009999;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
} td button
{
font-size: 12px;
}
</style>
<script type="text/javascript">
/*
createTable(toid, jsondata, check, edit, del):用于动态创建table,第0行为表头,数据里必须包含表头和数据的id
@toid:创建table到id为toid的节点下
@jsondata:用于创建table的json格式的数据(须在jsondata里包含表头标题)
@check:是否创建查看按钮
@edit:是否创建编辑按钮
@del:是否创建删除按钮
*/
function createTable(toid, jsondata, check, edit, del) {
var table = document.createElement("table");
var tr, td;
for (i in jsondata) {
tr = document.createElement("tr"); //创建tr
//________________创建表头________________________________________
if (i == 0) {
for (j in jsondata[i]) { //根据数据在tr内创建td
td = document.createElement("td");
td.appendChild(document.createTextNode(jsondata[i][j]));
if (j == "id") { //创建隐藏的td来存放id
td.style.display = "none";
}
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (check == true) { //创建查看按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("查看"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (edit == true) { //创建编辑按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("编辑"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
if (del == true) { //创建删除按钮
td = document.createElement("td");
td.appendChild(document.createTextNode("删除"));
td.style.background = "#C1DAD7"; //设置表头颜色
tr.appendChild(td);
}
}
//________________创建数据行________________________________________
else {
for (j in jsondata[i]) { //根据数据在tr内创建td
td = document.createElement("td");
td.appendChild(document.createTextNode(jsondata[i][j]));
if (j == "id") { //创建隐藏的td来存放id
td.style.display = "none";
}
tr.appendChild(td);
}
if (check == true) { //创建查看按钮
td = document.createElement("td");
var btnCheck = document.createElement("button");
btnCheck.appendChild(document.createTextNode("查看"));
td.appendChild(btnCheck);
tr.appendChild(td);
}
if (edit == true) { //创建编辑按钮
td = document.createElement("td");
var btnEdit = document.createElement("button");
btnEdit.appendChild(document.createTextNode("编辑"));
td.appendChild(btnEdit);
tr.appendChild(td);
}
if (del == true) { //创建删除按钮
td = document.createElement("td");
var btnDel = document.createElement("button");
btnDel.appendChild(document.createTextNode("删除"));
td.appendChild(btnDel);
tr.appendChild(td);
}
}
table.appendChild(tr);
}
document.getElementById(toid).appendChild(table);
}
</script>
<script type="text/javascript">
var testData = eval("([{\"No\":\"序号\",\"name\":\"姓名\",\"gender\":\"性别\",\"age\":\"年龄\"},{\"No\":\"1\",\"name\":\"小五毛\",\"gender\":\"男\",\"age\":\"22\"},{\"No\":\"2\",\"name\":\"中五毛\",\"gender\":\"女\",\"age\":\"18\"},{\"No\":\"3\",\"name\":\"大五毛\",\"gender\":\"男\",\"age\":\"20\"}])");
window.onload = function () {
createTable("data", testData, true, true, true);
}
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
动态生成table的demo
这里有一个要注意的地方,你可以选择使用jquery来解释json数据,使用jquery.parseJSON()对数据格式的要求比较高,必须符合json格式;如果使用原生js的话,必须使用eval()这个方法,eval()的速度非常快,但是他可以编译以及执行任何javaScript程序,所以会存在安全问题。在使用eval()时,来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入,就有可能提供无效的json或者载有危险的脚本,在eval()中执行脚本,释放恶意代码。
另外,亲测暂时不兼容ie7版本以下的浏览器,支持ie8以上以及chrome、firefox浏览器。有兴趣的看官可以修改一下,让它兼容ie7以下的浏览器。
小生初出茅庐,对世界充满太多好奇,自身能力也充满各种空缺,写得不好还望指出。如有好的修改建议,请告知一声,大家共同进步。
初探原生js根据json数据动态创建table的更多相关文章
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
- mui 根据 json 数据动态创建列表
使用 underscore.js 模块解析 Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑. 实例: <!DOCTYPE html> <h ...
- 原生js,jquery通过ajax获得后台json数据动态新增页面元素
一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...
- js格式化JSON数据
前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...
- js基础例子动态创建table实例
<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...
- 原生js格式化json工具
json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...
- JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
- 原生js格式化json的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 传智播客.Net培训就业班入学测试题
2.对学员的结业考试成绩评测,要求在控制台中提示用户输入学员考试成绩,写一个方法,根据用户输入的成绩,返回一个等级:90分以上A级.80~90分B级.70~80分C级.60~70分B级.60分以下C级 ...
- [CLR via C#]1.1 将源代码编译成托管代码
原文:[CLR via C#]1.1 将源代码编译成托管代码 1. 公共语言运行时(Common Language Runtime,CLR)是一种可由多种编程语言使用的"运行时". ...
- struts2的Action该方法不能去
最近做的一个特征,使用struts2,input标签内容,并与相应的内容背景的实体类,当提交方法,无法进入action该方法和程序没有报错被,检验N通方法还没有找到,查找终于找到了,它是input标签 ...
- mysql5.6.16绿色版配置、运行
原文:mysql5.6.16绿色版配置.运行 1.从该地址http://dev.mysql.com/downloads/mysql/中选择windows的版本,选择下载. 2.将下载的压缩包解压. 3 ...
- 多线程学习之五超时模式Timer
timed[超时模式]案例:一个线程提供下载数据,另一个线程执行下载,如果有5秒钟以上,提供下载的线程没有提供数据,下载线程因超时异常,停止下载线程运行. 超时异常类 /** * */ package ...
- 第4章2节《MonkeyRunner源码剖析》ADB协议及服务: ADB服务SERVICES.TXT翻译参考(原创)
天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...
- thrift js javascript C# Csharp webservice
http://www.cnblogs.com/xxxteam/archive/2013/04/15/3023159.html 利用thrift实现js与C#通讯的例子 关键字:thrift js ja ...
- 使用python的Flask实现一个RESTful API服务器端
使用python的Flask实现一个RESTful API服务器端 最近这些年,REST已经成为web services和APIs的标准架构,很多APP的架构基本上是使用RESTful的形式了. 本文 ...
- SQL点滴3—一个简单的字符串分割函数
原文:SQL点滴3-一个简单的字符串分割函数 偶然在电脑里看到以前保存的这个函数,是将一个单独字符串切分成一组字符串,这里分隔符是英文逗号“,” 遇到其他情况只要稍加修改就好了 CREATE FUN ...
- CSS3 Media Queries 详细介绍与使用方法
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...