jQuery两种方法提取数据表格

标签：body   创建   取数   type   数组   cti   table   enc   建表   

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>

jQuery两种方法提取数据表格

标签：body   创建   取数   type   数组   cti   table   enc   建表   

原文地址：https://www.cnblogs.com/Code-Is-Fun/p/14717832.html