当前位置 IIS7博客首页 > 使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。 最大化 缩小

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

    作者:威武的大萝卜 栏目:未分类 时间:2020-06-30 10:04:58

    一、使用原生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>