js动态生成html

1、生成html
动态生成showView

    <div class="showView">

    </div>

异步获取数据：

var del_id = "";
  function del(e,notice_id)
  {
    del_id = notice_id;
    $(".del_modal_id").val(del_id)
    $.ajax({
      url: "/admin/samproofing/getNotice",
      type: "get",
      data:{
        '_token':LA.token,
        'id':del_id,
      },
      dataType:'json',
      success: function (res) {
        console.log(res.data)
        if (res.code == 100) {
          $(".showView").empty();
          var html = html_node(res.data.paper_type_id,res.data.delivery_date,res.data.proofingCh,res.data.op_date,res.data.arr_remark);
          $(".showView").append(html);
          
          $(".paper_type_id_del").val(res.data.paper_type_id)
          $(".act_material_date_del").val(res.data.act_material_date)
          $(".sam_delivery_del").val(res.data.delivery_date)
           
        }
      }
    });
  }

传入数据渲染showView的内容：

<script>
  function html_node(paper_type_id,delivery_date,proofingCh,op_date,arr_remark){
    var html = `
          <div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-body" style="padding-top: 1px !important;padding-left: 2px !important;">
              <div class="row " id="rate-top" style="margin-bottom: 68px">
                <div class="col-md-1" style="width: 5%;padding-top: 0.1rem;">
                  <a href="javascript:void(0);">
                    <strong>节点</strong>
                    <p title="标准用时" style="color: #00a65a;width:60px">标准用时:</p>
                    <p title="实际用时" style="color: #00a65a;width:60px">实际用时:</p>
                    <p title="业务员/跟单员" style="color: #00a65a;width:60px">负&nbsp;&nbsp;责&nbsp;&nbsp;人:</p>
                  </a>
                </div>
                <div class="col-md-11" style="width: 95%;">
                  <div>
                `

    if(paper_type_id == 2 || (paper_type_id == 0 && (delivery_date != "" || delivery_date != null))){
      // 打板打样
      html += `<div id="bar">
                    <div></div>
                    </div>`
    }
     
    // 下单 跟单
    html += `<div class="col-sm-1 rate">
                  <a href="javascript:void(0);">
                  <div class="yuan">`+
      node_status(op_date['sales_date'],op_date['aid_date'])
      +`</div>`
      +`<strong> `+ proofingCh['sale_time']
      +`</strong>`
      +`<p title="标准用时" style="color: #00a65a;">`
    if (op_date['aid_time']) {
      var str_state = timeStamp(op_date['aid_time'])
      html += `<span>` + str_state + `</span>`
    }
    html += `</p>`
      +`<p title="实际用时" style="color: #00a65a;">`
    if (op_date['aid_time']) {
      var str_state = timeStamp(op_date['aid_time'])
      html += `<span>` + str_state + `</span>`
    }
    html += `</p>`
      +`<p title="业务员/跟单员" style="color: #00a65a;">`
    if (op_date['deve_sales_name']) {
      var str_name = op_date['deve_sales_name']['name']
      html += `<span>` + str_name + `</span>`
    }
    if (op_date['deve_aid_name']){
      var str_name = op_date['deve_aid_name']['name']
      html += `<span>/` + str_name + `</span>`
    }
    html += `</p>
                </a>
                </div>`
    

    html += `
                </div>
              </div>
            </div>
          </div>
          `
    return html;
  }
</script>

2、画表格：

   <table  class="table table-responsive no-padding table-striped table-hover">
      <tbody class="show_view">

      </tbody>
  </table>

异步获取数据：

// 获取当天日期下的多次提交的数据
        $.ajax({
             url: "/admin/patfabric/getDaysDetail",
             type: "post",
             data:{
                 '_token':LA.token,
                 'relation_id':relation_id,
                 'fabric_id':fabric_id
             },
             dataType:'json',
             success: function (res) {
                 show_view(res.data)
             }
         });

填充数据：

function show_view(data)
    {
        var show_view = $(".show_view");
        show_view.empty()
        var html = "";
        html += `
            <tr>
                <td class='td_class_modal'>录入数量</td>
                <td class='td_class_modal'>备注</td>
                <td class='td_class_modal'>操作时间</td>
            </tr>
        `;
        if (data != undefined) {
            $("#myModalLabel1").html(data[0]['type_name']+data[0]['batch_date']+"的详情信息");
            for(var i in data)
            {
                html += `
                    <tr>
                        <td class='td_class_modal'>`+data[i]['batch_qty']+`</td>
                        <td class='td_class_modal'>`+data[i]['remarks']+`</td>
                        <td class='td_class_modal'>`+data[i]['created_at']+`</td>
                    </tr>
                `;
            }
        }else{
            $("#myModalLabel1").html("暂无内容");
        }
        show_view.append(html);
    }