一、使用原生js或者jQuery實現一個列表數據展示頁面，
展示字段包括序號、項目名稱、建設單位、建設日期、項
目狀態，並且根據不同的項目狀態使整行顯示不同顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 500px;
margin: 100px auto;
border: 2px gray solid;
border-collapse: collapse;
text-align: center;
}
td,th{
border: 1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc ;
}
.zerocolor{
background-color: orange;
}
.onecolor{
background-color: #2C8DFB;
}
.twocolor{
background-color: #c1e2b3;
}
</style>
</head>
<body>
<p>一、使用原生js或者jQuery實現一個列表數據展示頁面，
展示字段包括序號、項目名稱、建設單位、建設日期、項
目狀態，並且根據不同的項目狀態使整行顯示不同顏色。
</p>
<hr/>
<table>
<thead>
<tr>
<th>序號</th>
<th>項目名稱</th>
<th>建設單位 </th>
<th>建設日期</th>
<th>項目狀態</th>
<th>刪除</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
let item_statuses = ["籌備中", "進行中", "已完成"]; //項目狀態數組
function Item_Data(id, item_name, start_comp, start_date, item_status) {
this.id = id; //序號
this.item_name = item_name; //項目名稱
this.start_comp = start_comp; //建設單位
this.start_date = start_date; //建設日期
this.item_status = item_status; //項目狀態
}
let items = [];
items[0] = new Item_Data(0, "治理工程建設項目", "雲南水建公司", "2019-4-23",
item_statuses[0]);
items[1] = new Item_Data(1, "舊房屋改造項目", "雲南建築公司", "2019-5-13",
item_statuses[1]);
items[2] = new Item_Data(2, "某地旅遊文化建設項目", "天宇土木公司", "2019-7-5",
item_statuses[2]);
items[3] = new Item_Data(3, "遊樂場建造項目", "天天文化有限公司", "2019-8-7",
item_statuses[1]);
items[4] = new Item_Data(4, "污染治理項目", "環境治理公司", "2019-10-2",
item_statuses[2]);
items[5] = new Item_Data(5, "文化廣場建造項目", "健安建設有限公司", "2019-8-7",
item_statuses[2]);
items[6] = new Item_Data(6, "寫字樓建造項目", "田野土木公司", "2019-9-5",
item_statuses[0]);
let table = document.querySelector("table");
// console.log(table);
//添加td函數父節點和內容
function createtd(father,text) {
let td = document.createElement("td");
father.appendChild(td);
td.innerHTML = text;
}
function createdelete(father) {
let del = document.createElement("td");
del.innerHTML = "<a href='javascript:;'>刪除</a>"
father.appendChild(del);
return del;
}
for(let ind = 0; ind<items.length; ind++){
let tr = document.createElement("tr");
table.children[1].appendChild(tr);
for(let i in items[ind])
{
createtd(tr, items[ind][i]); //添加td
}
let del = createdelete(tr); //創建刪除項
let status = item_statuses.findIndex((item)=> item==items[ind].item_status);//得到項目狀態的數組下標
// console.log(status);
switch (status){ //每種狀態對應顏色不同
case 0:
tr.classList.add("zerocolor");
break;
case 1:
tr.classList.add("onecolor");
break;
case 2:
tr.classList.add("twocolor");
break;
}
}
let as = document.querySelectorAll("a");
console.log(as);
as.forEach((a)=>{
a.onclick = function () {
console.log(a.parentNode.parentNode);
table.children[1].removeChild(a.parentNode.parentNode)
}
})
</script>
</html>
</script>