js拼接table

在前端应用中，经常需要在js中动态拼接HTML页面，比如应用ajax进行局部刷新的时候，就需要在js中拼接HTML页面。

主要规则是将HTML页面的标签拼接为标签字符创，要特别注意的是标签中的变量或数值。

小编在此只贴出部分关键代码

在上述的table标签中拼接页面。拼接页面的内容如下：

KaTeX parse error: Expected '}', got 'EOF' at end of input: …               .ajaxSettings.async = false; //同步
               KaTeX parse error: Expected '}', got 'EOF' at end of input: …               .dialog.tips(“未检测到串口设备”,1,“hits.png”);
                            return ; 
                        }else{
                             for(var i=1; i<= length;i++){
                              //拼接列表页面
                              var tableContent = “”;
                              tableContent += ‘’;
                              tableContent += ‘com’+i+’  波特率’; //注意变量的拼接方式
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘110’;
                              tableContent += ‘300’;
                              tableContent += ‘600’;
                              tableContent += ‘1200’;
                              tableContent += ‘2400’;
                              tableContent += ‘4800’;
                              tableContent += ‘9600’;
                              tableContent += ‘14400’;
                              tableContent += ‘19200’;
                              tableContent += ‘38400’;
                              tableContent += ‘57600’;
                              tableContent += ‘115200’;
                              tableContent += ‘230400’;
                              tableContent += ‘460800’;
                              tableContent += ‘1024000’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘数据位’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘5’;
                              tableContent += ‘6’;
                              tableContent += ‘7’;
                              tableContent += ‘8’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              
                              tableContent += ‘停止位’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘1’;
                              tableContent += ‘2’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘校验位’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘无校验 None’;
                              tableContent += ‘偶校验 Even’;
                              tableContent += ‘奇校验 Odd’;
                              tableContent += ‘标记 Mark’;
                              tableContent += ‘空格 Space’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘’;
                              tableContent += ‘’;

//将拼接的内容追加到table标签里面
                              $("#serial_tab").append(tableContent);
                             }
                        }
                    }
            });
            loadConfig();
        });

最后页面的结果如下图所示: 大家莫见怪,css 样式代码我就不贴出来了

注意事项：

1.在HTML页面中拼接时，需要特别注意含有事件的拼接以及拼接事件中的参数形式。

本人亲自经历：在刚开始拼接时，拼接的形式为：

拼装好之后，进行触发的时候，一直没有反应，原因是里面的参数的格式不能识别，需要将其变为字符串形式。正确的拼装形式为：

<a href=“javascript:void(0);” οnclick=delComment("’+commentInfo.commentId+’","’+activityId +’") class=“btn btn-white m-r-5”>

拼装好之后，点击进行触发就可识别。

2.当拼装的HTML里面需要获取后台中的值时，也可以用jQuery的形式获取：${userId}。

不过在拼装的时候，尽量先将他获取出来，然后再拼装页面的时候，直接使用就好了，避免出错的几率。

3.标签中间的文本中变量的使用拼接方式：

tableContent += ‘’+num+’’;

作者：点化人生
来源：CSDN
原文：https://blog.csdn.net/qq_35661171/article/details/84965455
版权声明：本文为博主原创文章，转载请附上博文链接！