我想很多童鞋用js動態向表格中新增資料很熟悉，而且也覺得非常簡單！是的，對於寫頁面的童鞋來說，最喜歡寫查詢的頁面了，動態向表格繫結資料。用for迴圈就可以輕鬆搞定。

如果我們的業務需求有所變化，可能我們要的資料就不是這樣一條一條的中規中矩的。如果你還是新手，又沒有人教你，在網上又搜不到方法，可以告訴你一個簡便的方法，那就是讓後臺寫服務的同事在後臺把資料拼接好返回給你，當然了，這種無理的要求一般大部分會遭到拒絕的，那怎麼辦呢？動腦子了。。。

下面列舉一下我經常遇到的一些表格格式：

1. 固定的表頭，固定的列資料

這種的話是最簡單不過的了，後臺丟給你的資料也是一條一條的，你只要按順序去繫結就可以了

2. 固定的表頭，列資料不固定

這種的話，對於沒寫過的童鞋來說，剛開始可能有點手足無措，但是一旦方法找到了，就會發現沒有什麼難度了，這樣的情況中，一般資料都是以單元格形式一條條的返回的。也就是給你的資料，可能是隻能填充一個單元格的，這樣的情況一般出現在統計表格中。那要如何去遍歷後臺返回的資料，然後正確的填充表格中去呢？

我的方法是這樣的，首先表頭是固定的，這就好辦了，這樣的話，你就先把表頭寫好，每個表頭給一個相應的class用來區分。然後給的列資料當中，第一行中肯定有一個唯一的id，一般這種都是以人為主鍵的id。我們這裡就假如是查客戶的一些資訊。比方，你查的是客戶，那麼你肯定要將客戶的名稱作邊這個表格的第一列，這個時候，表格中tbody的每一行tr的第一個單元格td肯定是存放你的客戶名稱，這個時候，你就把客戶的id作為這一行的唯一標識：

<table>
            </thead>
                <th>姓名</th>
                <th class='fl-1'>分類1</th>
                <th class='fl-2'>分類2</th>
                <th class='fl-3'>分類3</th>
            </thead>
            <tbody>
                <tr
 
 data-id='"+customerId+"'>
                    <td>張三</td>
                    <td class='fl-1'>10</td>
                    <td class='fl-2'>20</td>
                    <td class='fl-3'>30</td>
                </tr>
            </tbody>
        </table>

但是表格填充和普通的元素填充是不一樣的。因為表格的話你不能想在哪裡填充就在那裡填充，一個表格看起來是要完整的。所以你在填充的時候，先將一行先填充起來，再往裡面填充資料。假如我們這個是一個4列的動態資料。你就可以這樣去填充。

    //假如從後臺返回的資料結果是一個json格式的 result;
    var customerId=result.customerId;
    if($("table tbody tr").length==0){//表示你的表格還沒填充任何一條資料
        $("table tbody").append("<tr data-id='"+customerId+"'><td></td><td></td><td></td></tr>");
    }else{
        /*假如這個時候你的表格中已有新增過資料了！那這個時候，新的一條資料要怎麼辦呢？那這個時候要判斷這條是一條新資料，還是一條應該往已有行單元格里填充。那你就可以根據customerId判斷了*/

        //如果是一條需要你往已有表格裡填的資料        
        if($("table tbody tr[data-id='"+customerId+"']").length>0){
            //這個時候看給你的資料分類了。假如結果是這樣的(一般都是用迴圈解析資料的，我在這裡就簡寫了)
            var fl=reslut.list[i].fl;//獲取分類
            var fl-value=result.list[i].fl-value;//獲取分類值
            //下面這種寫法就會將對應的資料填充到對應的單元格
            $("table tbody tr[data-id='"+customerId+"'] td."+fl).text(fl-value);
        }else{//表示將新增一條新資料
        $("table tbody").append("<tr data-id='"+customerId+"'><td></td><td></td><td></td></tr>");
        //繼續用填充所要的資料就可以了
        }
    }

3.表頭不固定，列資料也不固定

這種情況的話一般比較少見，但是是有的。假如我們的需求是統計公司的所有的員工的簽到資訊，然後表頭的話是根據時間去動態生成的。那這個時候我們要怎麼做呢？

首先，根據時間去查詢表頭，讓後臺返回一個表頭的資料，我們先填充好表頭，然後按鈕第2種情況中所說的，給表頭加一個class屬性，這樣的話，後面就和第2種情況差不多了。我就不細說了

總結，在第2種情況和第三種情況中，我們一般在填充tbody中的資料的時候，首先一定要新增一行後，再去新增資料，我一般用比較笨的方法，是填充一個td有class資料為空的行，這樣的話，當我得到資料的時候，我就可以直接準確的定位到我所需要填充資料的單元格中。

其實這種不固定的表格資料填充，只要你掌握方法了，那麼你就會發現，其實不難，如果方法找不到，你在那裡墨跡一天也不一定有進展，你的思路一定要清晰。
如果還有不懂的童鞋，可以加我vx:1048725765（一定要備註你是在csdn這裡加的我，要不然不回覆），可以給我留言，。你也可以將你的資料以文字形式發給我，我給你寫成一個demo。