dom节点动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
</style>
</head>
<body>
<script>
//1.首先创建表格
var tab=document.createElement('table');
//2.创建表格标题
var cap=document.createElement('caption');
cap.innerHTML="510宿舍学生调查表";
tab.appendChild(cap);
var tr=HreadTR();
tab.appendChild(tr);
var tr1=createTR('1000','李龙飞',19);
var tr2=createTR('1001','薛金灿',16);
var tr3=createTR('1002','陈星杰',18);
var tr4=createTR('1003','井含腾',17);
var tr5=createTR('1004','刘璐璐',17);
var tr6=createTR('1005','李明阳',17);
tab.appendChild(tr1);
tab.appendChild(tr2);
tab.appendChild(tr3);
tab.appendChild(tr4);
tab.appendChild(tr5);
tab.appendChild(tr6);
//创建表头 行
function HreadTR(){
var tr=document.createElement('tr');
var th1=createTd('th',"编号",false);
var th2=createTd('th',"名字",false);
var th3=createTd('th',"年龄",false);
var th4=createTd('th',"操作",false);
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
return tr;
}
//创建普通表格 行
function createTR(id,name,age){
var tr=document.createElement('tr');
var td1=createTd('td',id,false);
var td2=createTd('td',name,false);
var td3=createTd('td',age,false);
var td4=createTd('td','删除',true);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;//把一行 返回给调用者
}
//创建列 tagName是创建 tr/td 不确定用变量来代替 text表格里的内容 isLink是判断创建链接还是普通表格
function createTd(tagName,text,isLink){
//创建表头 并且 创建普通表格
var th_td=document.createElement(tagName);
if(isLink){//如果为真则创建超链接
var link=document.createElement('a');
link.href="#";
link.innerHTML=text;
th_td.appendChild(link);
}else{
th_td.innerHTML=text;
}
return th_td;//创建完之后 把表格返回给调用者
}
//把表格加到body中
document.body.appendChild(tab);
</script>
</body>
</html>
仔细观察后会发现,创建表头的行和普通的行代码基本一样。那么代码还能优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{width: 500px;border:1px solid #ddd;border-collapse: collapse;}
tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
</style>
</head>
<body>
<script>
//1.首先创建表格
var tab=document.createElement('table');
//2.创建表格标题
var cap=document.createElement('caption');
cap.innerHTML="510宿舍学生调查表";
tab.appendChild(cap);
//'th' 创建表头行 true
var tr=createTR('th','编号','姓名','年龄','操作',true);
tab.appendChild(tr);
//创建普通行
var tr1=createTR('td','1000','李龙飞',19,'删除',false);//传入值
var tr2=createTR('td','1001','薛金灿',16,'删除',false);
var tr3=createTR('td','1002','陈星杰',18,'删除',false);
var tr4=createTR('td','1003','井含腾',17,'删除',false);
var tr5=createTR('td','1004','刘璐璐',17,'删除',false);
var tr6=createTR('td','1005','李明阳',17,'删除',false);
//把行添加到表格里
tab.appendChild(tr1);
tab.appendChild(tr2);
tab.appendChild(tr3);
tab.appendChild(tr4);
tab.appendChild(tr5);
tab.appendChild(tr6);
//3.创建行 tagName决定是tr还是td,中间四个参数是决定一行的里面的内容,isHead是否有超链接
function createTR(tagName,id,name,age,op,isHead){
//创建行
var tr=document.createElement('tr');
//列 前三列都是普通文本
var td1=createTd(tagName,id,false);//调用创建列函数
var td2=createTd(tagName,name,false);
var td3=createTd(tagName,age,false);
if(isHead){
var td4=createTd(tagName,op,false);//第四列 表头内容 不是超链接
}else{
var td4=createTd(tagName,op,true);//第四列 表格内容 是超链接
}
//把列放到行里面
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
return tr;//返回给调用者一行数据
}
//4.创建列 text表格里的内容 isLink是判断创建链接还是普通表格
function createTd(tagName,text,isLink){
// tagName是创建 tr/td 不确定用变量来代替
var th_td=document.createElement(tagName);
if(isLink){//如果为真则创建超链接
var link=document.createElement('a');
link.href="#";
link.innerHTML=text;
link.onclick=function(){
if(confirm("是否删除?")){
//当前是a a的父节点是td td的父节点是tr tr的父节点是table,表格删除一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
th_td.appendChild(link);
}else{
th_td.innerHTML=text;
}
return th_td;//创建完之后 把表格返回给调用者
}
//把表格加到body中
document.body.appendChild(tab);
</script>
</body>
</html>
写了上面的例子,感觉参数的传递很重要。把变化的,不确定用变量来代替。那里调用再传入需要的值。不同的地方,传入不同的值。
第一个块代码啰嗦,重复的比较多。但是第二块代码却结构更加清晰。 一个函数一个功能。也体现了封装的重要性,方便。牢记这种方式。
加油!!!