随笔- 6 文章- 0 评论- 0 阅读- 89

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>
    $(document).ready(function () {
        getDataSet();
    });

    function getDataSet() {
        $("body").on("click", "#search", function () {
            $.ajax({
                type: "get",
                url: "http://114.67.241.121:8080/product/list",
                complete: function (data) {
                    let dataSet = data.responseJSON.data;
                    $("#product").empty();
                    $("#product").append(buildTableContent(dataSet));
                },
            });
        });
    }

    function buildTableContent(dataSet) {
        let tableContent = "<table><tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>";
        for (let i = 0; i < dataSet.length; i++) {
            tableContent += "<tr>";
            tableContent += "<td>" + "<img src='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + "</td>";
            tableContent += "<td>" + dataSet[i].brand + "</td>";
            tableContent += "<td>" + "<a target='_blank' href='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + dataSet[i].model + "</a></td>";
            tableContent += "<td>" + dataSet[i].price + "</td>";
            tableContent += "</tr>";
        }
        tableContent += "</table>";
        return 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>