采用table+jQuery加载数据，实现数据与表格布局的分离

在日常开发工作中，总是遇到通过异步请求数据并用表格展示的的场景，看到很多解决此类问题通常采用拼字符串的形式，如：

//js示例代码
var td1="<td>B000123</td>";
var td2="<td>张三</td>";
var td3="<td>2017-09-17</td>";
var td4="<td><a href="#" class="btn btn-default">编辑</a></td>";
var tdn=......//此处省略好多列
var trString="<tr>"+td1+td2+td3+td4+tdn+"</tr>";
$("#tablelist").append(trString); //向ID为tablelist的表格追加行

以上的方式采用数据和表格混合的方式可以满足需求并实现效果，但是遇到业务需求变动，导致表格列增加、减少、前后调整时，修改以上代码回很苦恼，甚至导致形如【$(this).find('td'). eq(6).find('input').val() 】的代码直接报错，原因就在于数据与布局没有分离。


本着数据与布局分离的思想，把生成行的代码分离出来，列的展现形式由表格决定，数据只负责向表格对应的列绑定数据即可，于是采用了以下方式：

HTML布局部分：

<table class="table table-hover" id="tablelist">
<thead>
    <tr class="active">
	<th fname="fnum">No.</th>
	<th fname="checkbox"><input type="checkbox" selectall="fid"/></th>
	<th fname="fempnum">编号</th>
	<th fname="fempname">姓名</th>
	<th fname="fstatus">状态</th>
	<th fname="fredate">时间</th>
	<th fname="fope">操作</th>
    </tr>
</thead>
<tbody>

</tbody>
<tfoot>
    <tr class="active"><td>【分页代码】</td></tr>
</tfoot>
</table>