jQuery两种方法添加数据表格到HTML

jQ创建表格的两种方法

1.模板字符串法

   $(function () {
            //模板字符串的方式添加到页面
            $('#btn').click(function () {
                let str = ''
                data.forEach(function (value) {
                    str += `
               <tr>
               <td>${value.name}</td>    
               <td>${value.url}</td>    
               <td>${value.type}</td>    
               </tr>
               `
                })

 

2.push方法

   $(function () {
            $('#btn').click(function () {
                let arr = []
                data.forEach(function (value) {
                    arr.push(`
               <tr>
               <td>${value.name}</td>    
               <td>${value.contain}</td>    
               <td>${value.date}</td>    
               </tr>
               `)
​
                })
                let arrStr = arr.join('')
                //每一个数组元素都是一个完整的tr/tr
                //join拼接数组元素
                console.log(arrStr);
                $('tbody').html(arrStr)
            })
        })

 

HTML结构
   <input type="button" value="获取数据" id="btn" />
    <br />
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>内容</th>
                <th>日期</th>
            </tr>
        </thead>
        <tbody id="j_tbData">
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>