15 jquery模拟获取数据，拼接、填充结构

作者: An的杂货铺 | 来源:发表于2019-03-11 16:24 被阅读0次

15 jquery模拟获取数据，拼接、填充结构
JQuery 的元素选择器的实现原理
jQuery （first day）
QT QVariant支持结构体的方法
使用mock模拟数据，实现图片文字向上的轮播
jQuery基本函数整理
jquery
Fetch
Office 学习笔记
Android日志：获取网络数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            margin: 100px 0 0 300px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            color: #fff;
            background: #09c;
            font: bold 16px "微软雅黑";
        }

        td {
            font: bold 14px "微软雅黑"; 
        }
    </style>
</head>
<body>
    <input type="button" value="获取数据" id="btnGetData">
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>专业</th>
                </tr>
            </thead> 
            <tbody>
            </tbody>   
        </table>
    </div>
</body>
 <script src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
    $(function() {
         // 模拟数据
         var data = [{
             "name":"张杰",
             "job":"sing"
         },{
            "name":"郭富城",
             "job":"舞蹈"
         }];
         $('#btnGetData').click(function(){
            var html = '';
            for(var i = 0;i<data.length;i++){
                html+='<tr><td>'+data[i].name+'</td><td>'+data[i].job+'</td></tr>'
            }
            console.log(html);
            // $('tbody').append(html)
            $('tbody').html(html);
         })

    });
 
</script>
</script>
</html>

如图

image.png