在日常開發工作中，總是遇到透過非同步請求資料並用表格展示的的場景，看到許多解決此類問題通常採用拼字串的形式，如：
//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>JS部分：
//定义表格ID
var tableListId= "tablelist";
//定义tfoot跨列数
var tablecolnum;
//定义表格列名
var colNames;
$(function () {
//设置tfoot跨列数
tablecolnum = setTablefootcolspan(tableListId);
//获得表格列名
colNames = getTableListColNames(tableListId);
//加载添加数据
getDataTable(tablelistid)
});
//数据加载调用函数示例，现实应用场景是从服务器端请求Json方式
function getDataTable(objTableID) {
removeTbodyHtml(tableListId); //移除tbody内容
//定义数据格式
row = {
index:"",
fnum: "",
checkbox: "",
fempnum: "",
fempname: "",
fredate: "",
fstatus: "",
fope: ""
}
//从接口获取数据后改造以下过程
for (i = 0; i < 6; i++) {
//赋值
row.index = i;
row.fnum = i+1;
row.checkbox = "<input type='checkbox' name='fid' value='" + i + "'/>";
row.fempnum = "C000"+row.fnum;
row.fempname = "张三" + row.fnum;
row.fstatus = "已启用";
row.fredate = "2017-09-17 12:12:11";
row.fope = "<a href='#' class='btn btn-default'>进入</a>";
var trAttrs = " class='warning'"; //自定义行样式，当然可以定义更多
//绑定数据到表格， row.index 必须唯一否则会引起行之间相互覆盖
BindDataTable(objTableID, colNames, row.index, row, trAttrs)
}
}
//************绑定数据的通用JS函数 S**********
//获得表格列名
function getTableListColNames(tableListId) {
var colNames = [];
var tablecolnum = $("#" + tableListId + " thead tr th").length;
for (col = 0; col < tablecolnum; col++) {
colNames[col] = $("#" + tableListId + " thead th:eq(" + col + ")").attr("fname");
}
return colNames;
}
//设置tfoot跨列数
function setTablefootcolspan(tableid) {
tablecolnum = $("#" + tableid + " thead tr th").length;
if ($("#" + tableid + " tfoot") != undefined) {
$("#" + tableid + " tfoot tr td").attr("colspan", tablecolnum);
}
return tablecolnum;
}
//移除tbody
function removeTbodyHtml(objTableID) {
$("#" + objTableID + " tbody").children().remove();
}
///加载表格数据
///objTableID: 表格ID
///colNames:表格列名数组
///rowsIdx: 主键索引值
///rows:数据模型
///trAttrs:行熟悉，可自定义
function BindDataTable(objTableID, colNames, rowsIdx,rows,trAttrs) {
var trbefor="",trafter="",tdstr="";
if(trAttrs==undefined){trAttrs="";}
trbefor = "<tr rowid='tr" + rowsIdx + "' id='tr" + rowsIdx + "' "+trAttrs+">";
for (col = 0; col < colNames.length; col++) {
if (rows[colNames[col]] == undefined) {
tdstr += "<td></td>";
} else {
tdstr += "<td>" + rows[colNames[col]] + "</td>";
}
}
trafter= "</tr>";
//判断更新还是新增
if ($("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").length == 0)
{
$("#" + objTableID + " tbody").append(trbefor+tdstr+trafter);
}
else
{ $("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").html(tdstr); }
tdstr = "";
}
//************绑定数据JS函数 E**********如此當表格需要調整時，只需要改變表格的Thead的位置即可，其他一切由數據決定，具體效果如下：
##1. 表格必須有唯一id
2. 表格必須包含thead,tbody,tfoot屬性 3. 表格thead的儲存格必須是th 且必須有列明,如fname="fname", 一一對應定義資料格式，如果不對應則不顯示該列
#### #以上是如何採用table和jQuery載入資料並實現資料與表格佈局的分離的詳細內容。更多資訊請關注PHP中文網其他相關文章！
