求大神优化前端js代码

Question

今天已经发过一个帖子了，因为最近发现自己的jsp文件打开后很卡，可能是因为js代码写的太垃圾了，主要就是ajax里面写的重复代码太多了，很感谢中午网友热心的帮我优化，下面这个是js拼接html代码的，感觉这样写太垃圾了，求大神优化下。。。    //加载客户参课记录     function loadcankejilu(){         var content = '';         $.ajax({                 cache: true,                 type: "POST",                 dataType:'json',                 url:'/hszx/queryCankejilu.do',                 data:{C_ID:$('#currentCID').val()},                 async: false,                 success: function(data) {                             var content = ' <table class="table table-border table-bordered table-bg table-hover table-sort;">'                                         +'              <tr>'                                         +'                  <td colspan="7">'             +'   <input type = "button" class="btn btn-primary" value = "报名" onclick="baomingpre()"/>'              +'   <input type = "button" id="baoming" style="display: none"  data-toggle="modal" data-target="#myModal6"/>'                                         +'                  </td>'                                         +'              </tr>'                                         +'              <tr>'                                         +'                  <th colspan="7"></th>'                                         +'              </tr>'                                         +'              <tr>'                                         +'                  <th>参课人</th>'                                         +'                  <th>课程名称</th>'                                         +'                  <th>开课地点</th>'                                         +'                  <th>报名价格</th>'                                         +'                  <th>开课时间</th>'                                         +'                  <th>课程状态</th>'                                         +'                  <th>报名来源</th>'                                         +'              </tr>';

Answer 1

字符串模板 es6 中 变量就是${cxx} 这样可以有效减少字符串拼接,提高可阅读行,append 追加的没有样式,应该是选择器没有选对,添加的位置有些不对,审查一下元素也许有帮助,forEach是数组的一个方法,也是遍历,和$.each 几乎相同,但是$.each把每个对象都封装为jQuery对象,而forEach没有封装,且第一个参数表示当前元素,

Answer 2

其实你的Table的表头的信息没有必要也拼接，直接写在html页面上，ajax回调处理的时候只拼接修正table的内容。

Answer 3

这种拼接最简单的就是这些数据放在后台来拼接，(因为后台语言拼接比前台js快)。到了前台直接把拼接好的字符串赋给相应标签就行了。当然用模版什么的也好。。。。

Answer 4

Table的表头的信息直接写在html页面上，ajax回调处理的时候只拼接data组装好的数据；
另外你的data是一个结果集 应该先判断是否为空，不为空再遍历，
没有必要dataObj = data；
字符串拼接太多,建议使用字符串模板

Answer 5

楼主，可以用for(value in item)循环遍历值，并同时循环创建th，如果不合题意，楼主就此略过，打扰了

Answer 6

中间的拼接方式，可以换成es6 的模板字符串，也会看上去赏心悦目好多~~~~