项目练习:表格的查改功能_function look(id,index)-CSDN博客

本文链接：https://blog.csdn.net/sl105105/article/details/126010460

我们拿到一个后台数据json文件如下:

{
    "data":[{
        "id":1,
        "price":38.00,
        "goodsName":"小熊电器",
        "status":0,
        "desc":"一个让人爱上做饭的小电器"
    },{
        "id":2,
        "price":58.01,
        "goodsName":"美的空调",
        "status":1,
        "desc":"一个让人爱上夏天的救命稻草"
    },{
        "id":3,
        "price":78.02,
        "goodsName":"格力空调",
        "status":0,
        "desc":"格力空调很好很给力"
    },{
        "id":4,
        "price":98.10,
        "goodsName":"菲力牛排",
        "status":1,
        "desc":"口感超级嫩超级好吃"
    },{
        "id":5,
        "price":200.00,
        "goodsName":"劳力士",
        "status":1,
        "desc":"这点价钱还想买真的劳力士？"
    }]
}

要求如下:

第一个:我们在一个表格体现出json文件中的数据,并且可以根据他的status可以改变我们表格的内容.

第二个:点击查看详情,能将desc的内容呈现在我们的页面上(可以利用我们的ID的唯一性来调用数据).

第三个:要求价格的总计,可以根据我们的筛选而跟着变化价格

可以尝试着去写一下,这个练习可以尽量运用我们ES6的新增属性来实现,我将实现代码贴在下方,如果想不到也可以参考一下,非常锻炼我们工作中运用到的场景,为了可以更好的模拟,给亲们提个要求,一定要注意更新我们获取的是不是最新的数据,如何获取最新的数据?这些,在敲代码的时候一定要考虑到.

实现代码如下:

html代码部分:

<body>
    <select name="" id="" onchange="changeFn(this)">
        <option value="2">全部商品</option>
        <option value="1">已发货</option>
        <option value="0">未发货</option>
    </select>
    <table border="1" cellpadding="10">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <!-- 如果status是1 显示已发货 0 代表未发货 -->
                <th>是否发货</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>小熊饼干</td>
                <td>100.00</td>
                <td>已发货</td>
                <td><button>查看详情</button></td>
            </tr> -->
        </tbody>
    </table>
    <h1 id="allPrice"></h1>

    <div id="tk" style="display: none;">
        <!-- <h2>商品名称：小熊豆干</h2>
        <h2>商品价格：89.00</h2>
        <h2>是否发货：已发货</h2>
        <h2>商品描述：我是小区保安，爱吃小熊豆干，搂着业主小安，维护一方平安！</h2> -->
    </div>

js部分代码,为了锻炼我们使用原生代码的能力顺便复习,所以还是使用原生代码来写:

<script>
        /* 全局变量 */
    
        /* 获取表格数据 */
        getList();

        function look(id) {
            console.log(id)
            getList("3",id);
        }   

        function getList(s,id) {
            var xhr = new XMLHttpRequest();
            xhr.open("get", "./goods.json", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText).data;
                    console.log(res);
                    if (s == "0") {
                        let arr = res.filter(function (item) {
                            return item.status == 0
                        })
                        showPage(arr)
                    }else if (s == "1") {
                        let arr = res.filter(function (item) {
                            return item.status == 1
                        })
                        showPage(arr)

                    }else if(s=="3"){
                        let obj = res.find(function (v) {
                            return v.id == id;
                        })
                        console.log(obj);
                        document.querySelector("#tk").innerHTML = `
                            <h2>商品名称：${obj.goodsName}</h2>
                            <h2>商品价格：${obj.price.toFixed(2)}</h2>
                            <h2>是否发货：${obj.status == 0 ? "未发货" : obj.status == 1 ? "已发货" : "物品丢失"}</h2>
                            <h2>商品描述：${obj.desc}</h2>
                        `;
                        document.querySelector("#tk").style.display = "block";
                    }
                    else{
                        showPage(res);
                    }
                }
            }
        }
        function showPage(res) {
            var str = "";
            res.forEach(function (item, index) {
                str += `
                            <tr>
                                <td>${item.goodsName}</td>
                                <td>${item.price.toFixed(2)}</td>
                                <td>${item.status == 0 ? "未发货" : item.status == 1 ? "已发货" : "物品丢失"}</td>
                                <td><button onclick="look(${item.id})">查看详情</button></td>
                            </tr>
                        `
            })
            document.querySelector("tbody").innerHTML = str;

            var priceArr = res.map(function (v) {
                return v.price
            })
            console.log(priceArr)
            var sum = priceArr.reduce(function (a, b) {
                console.log(a, b);
                return a + b;
            })
            console.log(sum)
            document.querySelector("#allPrice").innerHTML = "总价格：" + sum.toFixed(2);
        }
        function statusFn(s) {
            if (s == 0) {
                return "未发货"
            } else if (s == 1) {
                return "已发货"
            } else {
                return "物品丢失"
            }
        }

        /* 选择状态 */
        function changeFn(that) {
            console.log(that.value);
            switch (that.value) {
                case "0":
                    getList("0");
                    break;

                case "1":
                    getList("1");
                    break;

                case "2":
                    getList("2");
                    break;
            }
        }
    </script>

以上就是一个简单地练习,你学会了??

在代码如何提高自己的能力,没有捷径,只有不停的内卷,多多练习,加油!!!