模拟考试1111

最新推荐文章于 2024-08-09 21:30:00 发布

Candle..

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量42

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_62387101/article/details/130319298

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        table{
            width: 550px;
            border-collapse: collapse;
        }
        #head1{
            width: 100px;
        }
        #head2{
            width: 150px;
        }
        #head4{
            width: 150px;
        }
        th{
            height:30px;
            margin: 0px;
            text-align: center;
            border:1px solid black;
        }
        td{
            height:100px;
            margin: 0px;
            text-align: center;
            border:1px solid black;
        }
        img{
            width:90px;
            height: 90px;
        }
        a{
            color: #00ff00;
        }
        a:hover{
            color: #ff0000;
        }
    </style>
    <script>
        $(function(){
            $("#search").click(function(){
                $.ajax({
                    url:"http://114.67.241.121:8080/product/list",
                    type:"get",
                    success:function(result){
                        alert("success");
                        console.log(result);
                        for(var i=0;i<$(result.data).length;i++){
                            $("#table1").append("<tr><td>"+"<img src=\"http://114.67.241.121:8080/img/"+result.data[i].image+"\">"+"</td><td>"+
                                result.data[i].brand+"</td><td>"+
                                "<a target=\"_blank\" href=\"http://114.67.241.121:8080/img/"+result.data[i].image+"\">"+result.data[i].model+"</a>"+"</td><td>"+
                                result.data[i].price+"</td></tr>")
                        }
                        $("tr:eq(4)").css("background","#ffffd0")
                    },
                    error:function(){
                        alert("error")
                    },
                })
            })
        })
    </script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product">
    <table id="table1">
        <tr>
            <th id="head1"></th>
            <th id="head2">品牌</th>
            <th id="head3">型号</th>
            <th id="head4">价格</th>
        </tr>
    </table>
</div>
</body>
</html>