js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）

table标签中内容js生成

html代码

<div>
	 <table id="message-table" >
     	<thead>
        	<tr >
            	<th class="text-center hidden-xs">Select</th>
                <th class="hidden-xs">任务名</th>
                <th>处理人</th>
                <th class="text-center">创建时间</th>
                <th>操作</th>
            </tr>
         </thead>
         <tbody id="dakas">
			//此处为js生成的代码存放的地方
         </tbody>
      </table>
</div>

js代码

注意生成的表格要和在html中设计好的表头对应

$(function () {
    $.ajax({
        url: 'url地址',
        type: 'get',                 //获取数据方式:post/get          
        async: false,                  //加载方式默认异步,true为同步
        dataType: 'json',            //数据格式
        success: function (res) {
            var data = res.result;//后台返回数据
            var carNewsList = "";
            $.each(data, function (i, item) {//进行循环
                carNewsList += "<tr class='message-unread'>" +
                    "<td class='hidden-xs'>" +
                    "<label class='option block mn'>" +
                    "<input type='checkbox' name='mobileos' value='FR'>" +
                    "<span class='checkbox mn'></span>" +
                    "</label>" +
                    "</td>" +
                    "<td>"+item.pbName+"</td>" +
                    "<td>"+item.pbOriginalAssignee+"</td>" +
                    "<td style='display:none'>"+item.pbId+"</td>" +//不显示，进行处理时的id
                    "<td class='text-center fw600'>"+item.pbCreateTime+"</td>" +
                    "<td>" +
                    "<a href='personal.html?daka_id="+item.pbId+"' target='main'>处理</a>" +
                    "</td>"
                    "</tr>"
            });
            $('#dakas').html(carNewsList);        //数据在<div id="dakas"></div>里面显示
        },
        error: function (obj) {
            alert("提示:请求超时或遇到错误，请刷新页面后重试或联系管理员！");
        },
    });
});

js 动态生成html 触发事件传参字符转义

通常，在使用 JS 动态生成 html 的过程中，会嵌入相应的样式、事件等属性元素，而这时经常会出现所谓的 “单、双引号不够用” 的情况，别急，这时可以利用 html 语言中的转义字符来解决。下面就来介绍一下相应的转义字符吧：

& —— (ampersand) 转义字符对应为 &
“ —— (double quote) 双引号，转义字符对应为 "
’ —— (single quote)单引号，转义字符对应为 '
< —— (less than) 小于号，转义字符对应为 &lt;
> —— (greater than) 大于号，转义字符对应为 &gt;

例如上方js动态生成html时进行处理操作时a标签要调用一个带参数的方法。

...+
"<a href='javascript:void(0);' οnclick='fun1(&#039"+item.pbName+"&#039,&#039daka_id="+item.pbId+"&#039)' target='main'>处理</a>"+
...

此处需要注意，方法中传了两个参数第一个参数时文本，不会和&#039产生冲突，而第二个参数是一串数字，他会和&#039连起来导致无法识别为单引号，我的处理时在这个参数前边加了daka_id=，因为后期我就是要这么使用这个参数，这样解决比较笨，不知道有没有其他方法，欢迎留言！