欢迎来到知了堂!
知了堂-电话号码 028-87058185

分享JavaScript动态HTML字符串拼接法加载数据-知了堂

分享JavaScript动态HTML字符串拼接法加载数据

  描述

  。有时候前端请求获取到了数据,比如是一个要显示的表格数据。

  。js动态加载显示方法有两种。

  1. 动态创建元素,配置属性,加入母元素标签(编码量多)

  2. HTML字符串拼接,替换为母元素innerHTML(高效)

分享JavaScript动态HTML字符串拼接法加载数据

 

  方法

  方法一可以参考 =>分享JavaScript动态给表格节点tbody添加数据

  方法二也就是字符串拼接如下案例:
 

    var tdHtml = "";
    for (var i = 0; i != data.length; ++i) {
        tdHtml += '<tr class="baby_box">
' +
            '<td>
' +
            '<input type="checkbox" class="check_it">
' +
            '<img src="'.concat(data[i].imgUrl1).concat('" class="baby_img">
' +
                '<div class="baby_mess">
' +
                '<span class="baby_desc">'.concat(data[i].title).concat('</span>
' +
                    '<span class="baby_id">id:'.concat(data[i].introduction).concat
('</span>
' +
                        '</div>
' +
                        '</td>
' +
                        '<td class="red">'.concat(data[i].price).concat('</td>
' +
                            '<td>'.concat(data[i].saleVolume).concat('</td>
' +
                                '<td>'.concat(data[i].inventory).concat('</td>
' +
                                    '<td>
' +
                                    '<span>'.concat(data[i].type).concat('</span>
' +
                                        '</td>
' +
                                        '<td class="table_edit blue" onclick=
"deleteBook('.concat(data[i].id).concat(')">下架宝贝</td>
' +
                                        '</tr>'))))))));

    }
    $(".tableBody")[0].innerHTML = tdHtml;

  。遍历data列表,将数据生成为<tbody>下的每一个<td>

  。需要显示数据的地方使用.concat()字符串拼接函数。

  。最后循环结束自己修改<tbody>的innerHTML即可

  注意点 & 编程习惯

  JavaScript是解释性语言,所有字符串格式支持当双引号共存。一般共存情况下外侧使用单引号,内侧使用双引号。

  使用.concat()一般是连用两个,一个连接参数,一个连接后面的字符串。一般先在要连接的地方打入 **’’**一对单引号,然后中间插入 ‘.concat(数据).concat(’…后续字符串,然后在最后处添加一个 ) 即可。

  因为数据是后渲染生成的, 数据有滞后性,所有使用点击函数的要注意,一般使用传递参数的方法,后续再编写一个对应函数,一般不在字符串中展开写。如onclick=“deleteBook(’.concat(data[i].id).concat(’)”
 

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用