在视图中和在JS中画表格、填数据

一、在视图中直接画表格

 <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>