因为要做可编辑的表格,生成的表格结构如下:
<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的尺寸可能设置正确的。