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.运行效果
。