一、在视图中直接画表格
<table class="table table-hover" style="margin-bottom: 0"> <thead> <tr> <th class="column-client_branch">客户部门</th> <th class="column-brand_name">客户品牌</th> <th class="column-place_name">品名</th> <th class="column-fabric_remark" style="max-width:120px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">主要面料说明</th> <th class="column-fabri_date">面料交期</th> </tr> </thead> <tbody> @foreach($style_list as $k => $v) <tr> <td>{!! isset($v->exploit_color->client_branch)?$v->exploit_color->client_branch->title:'' !!}</td> <td>{!! isset($v->exploit->brand)?$v->exploit->brand->title:'' !!}</td> <td>{!! isset($v->exploit_color->place)?$v->exploit_color->place->title:'' !!}</td> <td style="max-width:120px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" title="{!! $v->fabric_remark !!}">{!! $v->fabric_remark !!}</td> <td>{!! $v->order_date !!}</td> </tr> @endforeach </tbody> </table>二、在JS中画表格
<table class="table table-hover"> <thead> <tr> <th>班组</th> <th>适应度</th> <th>有无计划</th> </tr> </thead> <tbody class="js-group-lists" style="overflow:auto;height:200px;"></tbody> <template class="group-tpl"> <tr class="init_row___LA_KEY__"> <td> <span class="group___LA_KEY__"></span> </td> <td> <span class="fitness___LA_KEY__"></span> </td> <td> <span class="is_plan___LA_KEY__"></span> </td> </tr> </template> </table> <script> $(function () { //加载数据 var group_recom = <?php echo $fitness_recom_data;?>; if (group_recom.length > 0) { for (var i = 0; i < group_recom.length; i++) { recommendHtml(group_recom[i]); } }; } var tpl_1 = $('template.group-tpl'); var index = 0; // TODO 推荐 HTML function recommendHtml(list=null){ index ++; var template = tpl_1.html().replace(/__LA_KEY__/g, index); $('.js-group-lists').append(template); if (list) { $('.group_'+index).text(list.group_name); $('.fitness_'+index).text(list.fitness); if (list.plan == 1){ $('.is_plan_'+index).text('有计划'); } } } </script>