模拟题-1-526互联

intput.html

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="search">
        <div>产品名称</div>
        <div><input type="text" placeholder="请输入产品名称"></div>
    </div>
    <div id="error"></div>
    <div id="submit"><input type="button" value="录入"></div>
</body>

</html>

<script src="./js/jquery-3.1.1.min.js"></script>
<script>

    $("#submit input").click(function () {
        let name = $("#search > div:nth-child(2) input").val();
        let verifyIfContainNum = /\d/;
        if (name == "") {
            $("#error").html("请输入有效数据");
        }
        else if (verifyIfContainNum.test(name)) {
            $("#error").html("请输入有效数据");
        }
        else {
            location.replace("product.html");
        }
    });

</script>

<style>
    #search>div:nth-child(1) {
        float: left;
        width: 100px;
        text-align: right;
        margin-right: 10px;
    }

    #submit input {
        width: 268px;
    }

    #error {
        color: #ff0000;
    }
</style>

View Code

product.html

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>产品</title>
</head>

<body>
    <div><input type="text" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
    <div id="product"></div>
</body>


</html>

<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    $("#search").click(function () {
        $.ajax({
            type: "get",
            url: "http://114.67.241.121:8080/product/list",
            complete: function (data) {
                let allInfo = data.responseJSON.data;
                console.log(allInfo);
                var tableContent = "";
                tableContent += "<table><tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>"
                for (var i = 0; i < allInfo.length; i++) {
                    tableContent += "<tr>";
                    tableContent += "<td>" + "<img src='http://114.67.241.121:8080/img/" + allInfo[i].image + "'>" + "</td>";
                    tableContent += "<td>" + allInfo[i].brand + "</td>";
                    tableContent += "<td>" + "<a target='_blank' href='http://114.67.241.121:8080/img/" + allInfo[i].image + "'>" + allInfo[i].model + "</a></td>";
                    tableContent += "<td>" + allInfo[i].price + "</td>";
                    tableContent += "</tr>";
                }
                tableContent += "</table>"

                $("#product").empty();
                $("#product").append(tableContent);
            },
        });
    });
    
</script>

<style>
    th {
        height: 30px;
    }

    td {
        height: 100px;
    }

    table {
        width: 550px;
        text-align: center;
        vertical-align: middle;

    }

    img {
        width: 100px;
        height: 100px;
    }

    tr th:nth-child(1) {
        width: 100px;
    }

    tr td:nth-child(1) {
        width: 100px;
    }

    tr td:nth-child(1)~td {
        width: 150px;
    }

    a {
        color: #00ff00;
    }

    a:hover {
        color: #ff0000;
    }

    tr th:nth-child(4) {
        background-color: #ffffd0;
    }

    tr td:nth-child(4) {
        background-color: #ffffd0;
    }

    table,
    th,
    td {
        border: 1px solid;
        border-collapse: collapse;
    }
</style>

View Code