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

最新推荐文章于 2022-09-16 17:49:23 发布

十年4646454sdg5sagsa

最新推荐文章于 2022-09-16 17:49:23 发布

阅读量1.8k

点赞数

分类专栏： web前端 js 文章标签： javascript

本文链接：https://blog.csdn.net/a12336487213/article/details/104801938

版权

web前端同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

47 篇文章 0 订阅

订阅专栏

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

十年4646454sdg5sagsa

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。

一、使用原生js或者jQuery实现一个列表数据展示页面，展示字段包括序号、项目名称、建设单位、建设日期、项目状态，并且根据不同的项目状态使整行显示不同颜色。 <style> table { width: 500px; margin: 100px auto; border...
复制链接

扫一扫