使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。

标签：javascrip   each   data   lap   innerhtml   文化   tor   length   auto   

一、使用原生js或者jQuery实现一个列表数据展示页面，
展示字段包括序号、项目名称、建设单位、建设日期、项
目状态，并且根据不同的项目状态使整行显示不同颜色。

一、使用原生js或者jQuery实现一个列表数据展示页面，
展示字段包括序号、项目名称、建设单位、建设日期、项
目状态，并且根据不同的项目状态使整行显示不同颜色。

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 = "删除"
father.appendChild(del);

return del;
}

for(let ind = 0; 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)
}
})

使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。

标签：javascrip   each   data   lap   innerhtml   文化   tor   length   auto   

原文地址：https://www.cnblogs.com/onesea/p/13212084.html