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);}

總結

以上是生活随笔為你收集整理的js动态生成html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。