使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。
Posted 牧童遥指杏花村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。相关的知识，希望对你有一定的参考价值。
一、使用原生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>
以上是关于使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。的主要内容，如果未能解决你的问题，请参考以下文章