<!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: 45px;}//如果想要整行背景色改变 换成background-color即可.zerocolor{color: #CE3B4B;}.onecolor{color: #2C8DFB;}</style></head><body><table><thead><tr><th>工站名称</th><th>报警状态 </th><th>报警日期</th></tr></thead><tbody></tbody></table></body><script>let item_statuses = ["报警", "未报警"]; //项目状态数组function Item_Data( item_name, item_status, start_date) {this.item_name = item_name; //项目名称this.item_status = item_status; //报警状态this.start_date = start_date; //报警日期}let items = [];items[0] = new Item_Data( "工站1", "报警", "2020-7-1",item_statuses[0]);items[1] = new Item_Data("工站2", "未报警", "2020-7-2",item_statuses[1]);items[2] = new Item_Data( "工站3", "报警", "2020-7-3",item_statuses[1]);items[3] = new Item_Data( "工站4", "报警", "2020-7-1",item_statuses[0]);items[4] = new Item_Data("工站5", "未报警", "2020-7-2",item_statuses[1]);items[5] = new Item_Data( "工站6", "报警", "2020-7-3",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;}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 status = item_statuses.findIndex((item)=> item==items[ind].item_status);//得到报警状态的数组下标switch (status){ //每种状态对应颜色不同case 0:tr.classList.add("zerocolor");break;case 1:tr.classList.add("onecolor");break;}}</script></html></script> 效果