当前位置：网站首页>Project exercise: the function of checking and modifying tables

Project exercise: the function of checking and modifying tables

2022-07-27 17:01:00 【sl105105】

We got a background data json The documents are as follows :

{
    "data":[{
        "id":1,
        "price":38.00,
        "goodsName":" Bear electric ",
        "status":0,
        "desc":" A small appliance that makes people love cooking "
    },{
        "id":2,
        "price":58.01,
        "goodsName":" Midea air-conditioning ",
        "status":1,
        "desc":" A life-saving straw that makes people fall in love with summer "
    },{
        "id":3,
        "price":78.02,
        "goodsName":" Gree air conditioning ",
        "status":0,
        "desc":" Gree air conditioner is very good, very awesome "
    },{
        "id":4,
        "price":98.10,
        "goodsName":" Filet steak ",
        "status":1,
        "desc":" The taste is super tender and delicious "
    },{
        "id":5,
        "price":200.00,
        "goodsName":" rolex ",
        "status":1,
        "desc":" I want to buy a real Rolex at this price ？"
    }]
}

Requirements are as follows :

first : We show in a table json The data in the file , And according to his status You can change the contents of our form .

the second : Click for details , Be able to make desc The content of is displayed on our page ( We can use our ID To call data ).

Third : Total required price , We can change the price according to our selection

Try to write , This exercise can try to use us ES6 To achieve , I'll post the implementation code below , If you can't think of it, you can also refer to , Very exercise the scenes we use in our work , In order to better simulate , Make a request to relatives , Be sure to update the latest data we get , How to get the latest data ? these , When typing code, you must consider .

The implementation code is as follows :

html Code section :

<body>
    <select name="" id="" onchange="changeFn(this)">
        <option value="2"> All goods </option>
        <option value="1"> Shipped </option>
        <option value="0"> Not delivered </option>
    </select>
    <table border="1" cellpadding="10">
        <thead>
            <tr>
                <th> Name of commodity </th>
                <th> commodity price </th>
                <!--  If status yes 1  Show shipped  0  Represents undelivered  -->
                <th> Whether to ship the goods or not </th>
                <th> operation </th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td> Bear biscuits </td>
                <td>100.00</td>
                <td> Shipped </td>
                <td><button> Check the details </button></td>
            </tr> -->
        </tbody>
    </table>
    <h1 id="allPrice"></h1>

    <div id="tk" style="display: none;">
        <!-- <h2> Name of commodity ： Bear Bean Curd </h2>
        <h2> commodity price ：89.00</h2>
        <h2> Whether to ship the goods or not ： Shipped </h2>
        <h2> Commodity Description ： I'm a community security guard , I like bear dried beans , Hug the owner Xiao an , To safeguard the safety of one party ！</h2> -->
    </div>

js Part of the code , In order to exercise our ability to use native code, please review , So use native code to write :

<script>
        /*  Global variables  */
    
        /*  Get table data  */
        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> Name of commodity ：${obj.goodsName}</h2>
                            <h2> commodity price ：${obj.price.toFixed(2)}</h2>
                            <h2> Whether to ship the goods or not ：${obj.status == 0 ? " Not delivered " : obj.status == 1 ? " Shipped " : " Items lost "}</h2>
                            <h2> Commodity Description ：${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 ? " Not delivered " : item.status == 1 ? " Shipped " : " Items lost "}</td>
                                <td><button onclick="look(${item.id})"> Check the details </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 = " Total price ：" + sum.toFixed(2);
        }
        function statusFn(s) {
            if (s == 0) {
                return " Not delivered "
            } else if (s == 1) {
                return " Shipped "
            } else {
                return " Items lost "
            }
        }

        /*  Selection status  */
        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>

The above is a simple exercise , You learned. ??

How to improve your ability in code , There is no shortcut. , Only keep rolling inside , Practice more , come on. !!!

原网站

版权声明
本文为[sl105105]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271454114781.html

边栏推荐

猜你喜欢

随机推荐