初探原生js根据json数据动态创建table
小生以实习生的职位进入了一家非纯软件的公司做asp.net开发，大半个月下来发现公司里居然没有前端工程师，这令我很诧异，跟着公司做项目，发现前端后台没有明显的分工，使用传统的WebFrom开发模式，一个Button都要返回服务器处理一次，服务器说它觉得很累。
而我最近由于公司有很多很紧急的任务交给我，所以之前说的那个个人博客暂停了一下。由于我想尽量减轻服务器负担，尽量让一些逻辑在浏览器端完成，浏览器端与服务器之间仅有数据交换，尽可能地把逻辑留给浏览器端处理。显然，js的强大之处就显示出来了——当然，使用jquery框架也不错，但是我希望使用原生js，这样能达到深入理解的效果。
我的目的是根据服务器端返回的json数据来动态生成一个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); }
这是我定义的一个js方法，怎么调用也在开头有说明，必须传入json格式的数据，否则出错。
下面再给这个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; }
好了，现在我们做一个demo测试一下它的效果，为了简单起见，我就不写服务器端返回json数据了，直接在浏览器端定义一个json格式的数据，也把js和css全写在html页面上（不推荐这种做法，这里只是为了简单起见）。
<!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>
这里有一个要注意的地方，你可以选择使用jquery来解释json数据，使用jquery.parseJSON()对数据格式的要求比较高，必须符合json格式；如果使用原生js的话，必须使用eval()这个方法，eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()时，来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。
另外，亲测暂时不兼容ie7版本以下的浏览器，支持ie8以上以及chrome、firefox浏览器。有兴趣的看官可以修改一下，让它兼容ie7以下的浏览器。
小生初出茅庐，对世界充满太多好奇，自身能力也充满各种空缺，写得不好还望指出。如有好的修改建议，请告知一声，大家共同进步。
