ul li 封装成表格&&调用ajax添加数据到表格

来源：互联网发布：柠檬网络电视 | 柠檬tv 编辑：程序博客网时间：2024/06/08 08:34
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="jquery-3.2.1.min.js"></script>    <style type="text/css" rel="stylesheet">        *{margin: 0;padding: 0;box-sizing: border-box}        ul{list-style: none}        .table-header,.table{width:1000px;}        .table-header>li, .table>li li{            border:1px solid black;width:20%;height:200px;line-height: 200px;padding: 0 auto;float:left;text-align: center;overflow:hidden;        }        li>img{            width: 200px;  height: 200px;}    </style></head><body><ul class="table-header">    <li>img</li>    <li>subBrand</li>    <li>name</li>    <li>searchKey</li>    <li>intro</li></ul><ul class="table"><!--<li>-->    <!--<ul>-->    <!--<li><img src="">msg.data[i].img</li>-->    <!--<li>msg.data[i].subBrand</li>-->    <!--<li>msg.data[i].name</li>-->    <!--<li>msg.data[i].searchKey</li>-->    <!--<li>msg.data[i].intro</li>-->    <!--</ul>--><!--</li>--></ul><script>$(document).ready(function(){    $.ajax({        type:"get",        datatype:"jason",        url:"",        success:function(msg){            if(msg.data){                var html='';                for(var i=0;i<msg.data.length;i++){                    html+='<li> <ul> <li><img src="'+msg.data[i].img+'"></li>'+                    '<li>'+msg.data[i].subBrand+'</li>'+                    '<li>'+msg.data[i].name+'</li>'+                    '<li>'+msg.data[i].searchKey+'</li>'+                    '<li>'+msg.data[i].intro+'</li>'+                    '</ul> </li>';                }                $(".table").html(html);            }        },        error:function(){            alert("err");        }    })});</script></body></html>
阅读全文
0 0