表格内，设置许多元素的大小时，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的尺寸可能设置正确的。