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

时间: 2024-10-15 22:42:42

表格内,设置许多元素的大小时,js的速度慢的办法的相关文章

JQuery设置缓慢下拉大行多次执行的解决办法,以及stop()函数的简单理解

$(function(){ $('.all>li').mouseover(function(e) {        $(this).children().stop().slideDown(300);    }); $('.all>li').mouseout(function(e) {        $(this).children().stop().slideUp(300);    });}) jQuery stop()的用法 1.stop([stopAll], [gotoEnd])方法有两个

元素分类--内联块状元素(特点:同行, 可设置宽高和边距)

内联块状元素(inline-block)就是同时具备内联元素.块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素. (css2.1新增),<img>.<input>标签就是这种内联块状标签. inline-block 元素特点: 1.和其他元素都在一行上: 2.元素的高度.宽度.行高以及顶和底边距都可设置. 示例: <!DOCTYPE HTML> <html> <head> <meta http-equ

去除行内(inline/inline-block)元素之间的间距

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl

什么是块级元素和内联级元素(二)

block(块)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度. ④它可以容纳内联元素和其他块元素   inline元素的特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 (中文叫法有多种内联元素.内嵌元素.行内元素.直进式元素). 块元素(block element)和内联元素(inline element)都是

HTML元素分类:块级元素 内联元素和内联块状元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 什么是块级元素?在html中<div>. <p>.<

. 我要让我的用户向指定的目录上载文件, 把 包含在表格内

我要让我的用户向指定的目录上载文件, 把 包含在表格内,而上传的脚本是这样的:. 为什么它不工作? A. Y在调用SAVE之前,不能使用表格选择.正确的操作方法是:先将其上传到一个临时文件夹,然后复制并移动到指定目录,如下示:n = Upload.Save "c:\upload" For Each File in Upload.Files File.Copy Upload.Form("Path") & "\" & File.Ext

设置canvas元素的宽高的奇妙(jiujie)发现

大家都知道设置一块画布的大小 我们可以这样: <canvas id="canvas" width="600" height="300"> </canvas> 也可以通过css进行设置 #canvas{ width:600px; height:300px; } 我这样写: 效果是这样: 可当我在css上也写上同样的尺寸并把canvas元素行内宽高去掉的时候..... hellow变的贼大..明明都是一样的尺寸. 好吧,其实:

顶级、块级、内联,html元素的三大分类

学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素. 1. Top-level element [顶级元素]:    { html, body, frameset }包括html, body, frameset, 表现如Block-level element, 属于高级块级元素. 2.

JavaScript 数组 length 属性获取数组长度或设置数组元素的数目

JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性得到元素数目 <script language="JavaScript"> var array_1 = new Array('a',10.5,true); document.write( '数组长度 ' + array_1.length ); </script> 运