初學js---動態生成表格

時間 2019-11-11

標籤初學動態生成表格欄目 JavaScript 简体版

原文原文鏈接

動態生成表格並封裝函數：javascript

1.動態建立表頭css

　　*經過createElement('table')建立一個表格標籤——>經過createElement('thead')建立表頭——>經過table.appendChild(thead')將表頭包含到表格中;html

　　　　**一樣的方法建立tr並將tr放到thead中java

　　　　　　***再將表頭數據依次放到表頭：經過app

將表頭數據放到表頭（theadData爲表頭的數據，函數的參數item爲數據內容）函數

　　將建立表頭的方法封裝成函數function creatHead(parent,headData)（）這裏的parent爲裝table的容器this

2.動態建立tbodyspa

　　　　*經過createElement（‘tbody’）建立tbody並將其放到table中——>一樣方法將數據放到tbody中code

　　　　　　**將建立tbody的方法封裝成函數function creatBody(table,bodyData)（）{}htm

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>