初學js---動態生成表格
動態生成表格並封裝函數：
1.動態創建表頭
*通過createElement(‘table‘)創建一個表格標簽——>通過createElement(‘thead‘)創建表頭——>通過table.appendChild(thead‘)將表頭包含到表格中;
**同樣的方法創建tr並將tr放到thead中
***再將表頭數據依次放到表頭：通過
將表頭數據放到表頭（theadData為表頭的數據，函數的參數item為數據內容）
將創建表頭的方法封裝成函數function creatHead(parent,headData)（）這裏的parent為裝table的容器
2.動態創建tbody
*通過createElement（‘tbody’）創建tbody並將其放到table中——>
同樣方法將數據放到tbody中
**將創建tbody的方法封裝成函數function creatBody(table,bodyData)（）{}
3.進行刪除操作
*給每一行tr再追加一個td用來放刪除的操作，這裏放了一個a標簽，註意要給a標簽設置href:javaScript:void(0),使a標簽點擊後不跳轉
**由於刪除操作是比較嚴肅的，在刪除之前要給一個彈框確定是否刪除，當確定要刪除後從tbody中刪除對應的tr
4.調用函數動態創建表格
*由於生成表頭和tbody的方法都進行了函數封裝，現在只要再創建將生成表頭和tbody的函數放在一起的生成完整表格的函數即可
**使用時調用封裝函數就可以了
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態封裝表格</title>
<style type="text/css">
#box table{
border-collapse: collapse; /*當有兩條邊框線時，只顯示一條邊框線*/
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
//表中的數據項
var bodyData=[
{name:"黃文傑",subject:"語文",scoer:"90"},
{name:"張曉梅",subject:"化學",scoer:"96"},
{name:"李傑凱",subject:"英語",scoer:"80"},
{name:"易夢雲",subject:"數學",scoer:"99"},
{name:"王小青",subject:"物理",scoer:"70"},
];
//定義表頭內容
var headData=[‘姓名‘,‘科目‘,‘成績‘,‘操作‘];
var box=document.getElementById(‘box‘);
//調用創建表格的函數
creatTable(box,headData,bodyData);
//定義創建表格的函數
function creatTable(parent,headData,bodyData){
var table=creatHead(parent,headData); //調用創建表頭的函數
creatBody(table,bodyData); //調用創建數據項的函數
}
//定義創建表頭的函數
function creatHead(parent,headData){
//動態生成table標簽
var table=document.createElement(‘table‘);
//將table標簽寫入box的div中
parent.appendChild(table);
table.border=‘1px‘;
table.width=‘500px‘;
table.cellSpacing=0;
//動態生成表頭中的thead標簽
var thead=document.createElement(‘thead‘);
//將thead標簽寫入table
table.appendChild(thead);
//動態生成tr標簽
var tr=document.createElement(‘tr‘);
//將tr標簽寫入thead標簽
thead.appendChild(tr);
tr.style.height=‘35px‘;
tr.style.background=‘lightgray‘;
//表頭遍歷
headData.forEach(function(item){
//動態生成th標簽
var th=document.createElement(‘th‘);
//將th標簽寫入th
tr.appendChild(th);
//將表頭數據寫入th中
th.innerHTML=item;
})
return table;
}
function creatBody(table,bodyData){
/*設置數據行*/
var tbody=document.createElement(‘tbody‘);
table.appendChild(tbody);
//遍歷數據
bodyData.forEach(function(item){
tr=document.createElement(‘tr‘);
tbody.appendChild(tr);
for(var key in item){ //將item這個對象的每一個屬性賦給key
var td=document.createElement(‘td‘);
tr.appendChild(td);
td.innerHTML=item[key];
}
/*操作的列*/
var td=document.createElement(‘td‘);
tr.appendChild(td);
var link=document.createElement(‘a‘);
link.href=‘javaScript:void(0)‘;
td.appendChild(link);
link.innerHTML=‘刪除‘;
/*刪除操作*/
link.onclick=linkclick;
})
function linkclick(){
//提示用戶是否刪除
var r=confirm(‘是否確認刪除‘);
if(r){
//刪除
//獲取點擊
var tr=this.parentNode.parentNode;
tbody.removeChild(tr);
}
}
};
</script>
</body>
</html>
初學js---動態生成表格