DOM動態生成表格
阿新 • • 發佈：2018-12-21
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: 1 仔細觀察後會發現，建立表頭的行和普通的行程式碼基本一樣。那麼程式碼還能優化
<!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>
寫了上面的例子，感覺引數的傳遞很重要。把變化的，不確定用變數來代替。那裡呼叫再傳入需要的值。不同的地方，傳入不同的值。
第一個塊程式碼囉嗦，重複的比較多。但是第二塊程式碼卻結構更加清晰。 一個函式一個功能。也體現了封裝的重要性，方便。牢記這種方式。
加油！！！