原生js生成table表单

来源：互联网发布：硕士云计算是什么专业编辑：程序博客网时间：2024/06/07 10:39

1.想要学习好javascript不能总是使用jquery,总是使用jquery会使以后的道路也来越窄

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>table</title>  <style>  .licl-table{width:500px;height:350px;border: 1px solid #000000;border-collapse:collapse;  }  .licl-table th,td{border:1px solid #000000;  }  </style> </head> <body>  <table class="licl-table" id="simpleTable"></table> </body> <script type="text/javascript">function $getById(id){return document.getElementById(id)};function $getByClass(name){return document.getElementByClassName(name);}var simpletable=$getById("licl-table");function initTable(table,config){var colums=config.colums;var thead=document.createElement("thead");table.appendChild(thead);var tr=document.createElement("tr");thead.appendChild(tr);var tbody=document.createElement("tbody");table.appendChild(tbody);for(var i=0;i<colums.length;i++){var th=document.createElement("th");tr.appendChild(th);th.innerHTML=colums[i].title;}}function loadTable(table,config,data){var colums=config.colums;for(var i=0;i<data.length;i++){var tr=document.createElement("tr");table.lastChild.appendChild(tr);for(var j=0;j<colums.length;j++){var td=document.createElement("td");tr.appendChild(td);td.innerHTML=data[i][colums[j].name];}}}var config={colums:[{title:"姓名",name:"name"},{title:"年龄",name:"age"},{title:"性别",name:"sex"}]}var data=[{name:"licl",age:25,sex:"男"},{name:"周星驰",age:53,sex:"男"},{name:"李小龙",age:63,sex:"男"}]var simpletable=$getById("simpleTable");/*simpletable.prototype.initTable=initTable();simpletable.prototype.loadTable=loadTable();*/initTable(simpletable,config);loadTable(simpletable,config,data);/*var chils= s.childNodes;  //得到s的全部子节点var par=s.parentNode;   //得到s的父节点var ns=s.nextSibling;   //获得s的下一个兄弟节点var ps=s.previousSibling;  //得到s的上一个兄弟节点var fc=s.firstChild;   //获得s的第一个子节点var lc=s.lastChild;   //获得s的最后一个子节点*/ </script></html>

2.运行效果

。

阅读全文

0 0