表格內，設置許多元素的大小時，js的速度慢的辦法

由於要作可編輯的表格，生成的表格結構以下：

<td class=" autoEdit" data-field="sex">
     <input class="autoEditinput" value="1" data-url="1111"  data-field="sex">
</td>

我要的最終效果是：（粉色的是input)

但input與表格顯得很不協調，要不撐得很大，要不就到td以外了。

思路1：設置td爲relative,input爲absolute,而後設置input大小爲td的大小。

$input.css({ width: w + 'px', height: h + 'px' });

      結果,若是input不少，會卡幾十秒。     1*

思路2：去js語句。  利用css，設置input的寬高爲100%。

    結果，每一個input好像都是159的寬度，整個表格會大，且把純文字的列擠得很窄。也可能有正確的實現方法，但我試了一些都沒成功。

思路3：必須用js的話，我先隱藏掉表或表body,而後再設置它的大小，設置完於顯示錶。是否是就不卡了呢？

 結果：用$.hide()方法，input就沒法獲取大小。設置visibility,雖然表格看不到，但依然很卡,速度沒有提高  2*。  想一想jquery還能夠$.detach()後，再append進來。由於在函數內，我就把tbody給detach(),結果是全部的input都是159這麼一個寬度，但各個表列仍是上面那樣，input全跑到表單元格以外了。   3*

思路4：因爲隱藏或detach後，沒法得到大小。因此第一次循環，先保存一下每一個input大小 ，再隱藏或detach，此時來設置input的大小，就會消除table的抖動。最後再顯示或append.

waitEdit.each 
    $input.data('w', w);
    $input.data('h', h);
 
tbl.hide(); 
waitEdit.each 
    $input.css({ width: $input.data('w') + 'px', height: $input.data('h') + 'px' });  
tbl.show();

此時1500個元素在chrome下1秒，在ie下2.7秒。在可接受的範圍以內 了。

----------------------------------------------------------------------------------

1*：代表absolute元素仍然會影響table的佈局。

2*：visibility雖然設爲hidden,但實際仍引用table的reflow

3*:  當時是把tbody給detach了，而後設置input。確定由於DOM結構不完整，而沒法獲取準確的大小形成失敗。或許我把整個table給detach掉，讓table在內存中是完整的，或許input的尺寸可能設置正確的。