<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>
仔细观察后会发现，创建表头的行和普通的行代码基本一样。那么代码还能优化
<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>
我要评论
网友评论