前端面试题：HTML表单根据不同状态显示不同的颜色

摘要：干货源码，拿走不谢，之前有小伙伴在找前端的工作，遇到面试官出过这样的一道面试题：

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

很明显这公司很重视程序员的代码基础，废话不多说，上干货！

1. HTML 表单的基本结构。

// <!-- html 表单的基本骨架 -->
<table id="data">
  <tr>
    <th>序号</th>
    <th>项目名称</th>
    <th>建设单位</th>
    <th>建设日期</th>
    <th>项目状态</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      建设中
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      已完成
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>未开始</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>超期</td>
  </tr>
</table>

2. css 样式，处理表单的原始结构样式和预设状态颜色样式。

table{
          
   width:600px; text-align:center; border-collapse:collapse;}
td,th{
          
   border:1px solid black; height: 25px;}
/* 项目状态 */
/* 未开始 */
.init{
          
   
  background: #eee;
}
/* 在建设 */
.warning{
          
   
  background: rgb(0, 225, 255);
}
/* 已完成 */
.success{
          
   
  background: rgb(0, 255, 42);
}
/* 超期 */
.danger{
          
   
  background: rgb(255, 0, 0);
}

3. javascript 代码，根据项目状态值，修改对应整行的颜色。（这里使用了原生js实现）

//1. 查找触发事件的元素
 //先找table
 var table=document.getElementById("data");
 // 找到每一行
 var tr = document.querySelectorAll("#data>tbody>tr");
 console.log(tr)
 //2. 为元素绑定事件处理函数
 tr.forEach((item, i)=>{
          
   
   var c = ;
   switch(item.children[4].innerText){
          
   
     case 未开始 : c = "init";break;
     case 建设中 : c = "warning";break;
     case 已完成 : c = "success";break;
     case 超期 : c = "danger";break;
     default : c = ;
   }
   // 将对应的类放到对应的状态栏中
//3. 查找要修改得元素
//4. 修改元素
   document.getElementsByTagName("tr")[i].classList=c;
 });