锁定表头（如Excel） [英] Locking Table Headers (like Excel)
问题描述
你好Javascript爱好者！
我需要垂直锁定一个TABLE HEADER，所以当你向上/向下滚动时，
内容移动但是标题总是可见的，就像你可以在
Excel中那样。
它适用于内部网应用，只需要在IE6中工作（以及未来/>
发布）。
我有一个工作示例：
http://c.1asphost.com/giggy/locked_h...in/default.htm
依赖于应用于TH的CSS hack：
{
top：expression（document.getElementById（" table_cont ainer_1" ）.scrollTop-0）;
}
这个例子是无缝而坚固的 - 而且很简单！ - 但是问题是
它在表格上的资源过于密集超过100行......它会使页面上的_EVERYTHING_减慢。其中一些表是1000行/ b $ b行以上！
任何人都有任何处理器价格较低的解决方案吗？
谢谢，
Ann
一些警告：
1.只需要在IE6及以后工作
2.资源便宜
3.标题数据是动态填充的，但是Wraps
4.内容是动态填充的，但Nowraps
** 3和4表示最宽数据列的宽度决定了每列的
宽度，包括该列的标题...
5.我不能使用固定宽度的列 - 它们必须通过动态数据的宽度确定它们的b $ b显示。
基本上，如果你看看上面的URL中的例子，_THAT_是我想要的各种方式，除非它太慢/资源贵...
谢谢，
Ann
Giggle Girl写道：我需要垂直锁定一个TABLE HEADER，所以当你向上/向下滚动时，内容会移动但是标题总是可见，就像你可以在Excel中做的那样。
搜索此论坛的档案以加热讨论此主题;）
这是一个内联网应用程序，只需要在IE6中工作（和未来
发布）。
这是一件好事。支持IE或Firefox（以及其他支持可滚动tbody的b $ b）更容易，但不能同时支持两者。
一个类似IE的解决方案我所做的是：
http://www.mattkruse.com /temp/floating_header.html
当页面上有多个长表时，这个特别有用，并且你想要滚动它的
页面像正常但有标题行棒。
我已经多次使用这种方法，每个人似乎都喜欢它。
我有一个工作的例子at：
http：//c.1asphost。 com / giggy / locked_h ... in / default.htm
依赖于应用于TH的CSS hack：
{
top：expression（document.getElementById（" ; table_cont ainer_1"）。scrollTop-0）;
}
有t主要问题：
1.即使您的用户交互不影响表达式评估，表达式也会随着鼠标移动而不断评估。这很糟糕IE / IM
设计。
2.你的document.getElementById（）调用会很慢。没有必要
来做 - 而是使用offsetParent [*]来找到可滚动的容器，
这应该可以加快速度。
另外，您应该考虑将规则添加到TR而不是每个TH。
任何人都有任何处理器价格较低的解决方案吗？
另一种选择是抛弃表达式而是有一个javascript
函数特定于设置顶部的表格。滚动
容器时TR的值。这种表达方式不经常评估。
当然，请记住，如果你的表中包含选择的元素，那么它们将通过你的显示来显示头。此外，如果你的桌子有任何单元格间隔，那么数据也会因此而流失。
我没有测试任何这些解决方案IE7，所以我不知道
是如何向前兼容的。
-
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
嘿Matt，
感谢您的回复：
2.您的document.getElementById（）调用会变慢。
有不需要这样做 - 而是使用offsetParent [*]来找到
可滚动容器，这应该可以加快速度。
你能提供吗？我有正确的代码，我可以插入
吧？ （我从来没有使用过offsetParent，也不知道把它放在哪里
吧......）
是的，我曾搜索过档案馆的befoer帖子并且看到很多
线程做类似的事情，还有一些你的帖子。什么都没有
是我想要的（到目前为止我已经看过了。）
关于你提供的样本，它不适用于我的目的。没有
进攻，但它太笨重了，它摇摇晃晃的方式，IMO。有一件事我喜欢我提供的例子是坚实的。它是;没有傻笑。
非常感谢您的回复！ （是的，Matt Kruse回答 - 其中一个
星在这里！）
谢谢，
Ann
Hello Javascript enthusiasts!
I need to lock a TABLE HEADER vertically, so when you scroll up/down,
the content moves but the header is always visible, like you can do in
Excel.
It is for an intranet app, and only has to work in IE6 (and future
releases).
I have a working example at:
http://c.1asphost.com/giggy/locked_h...in/default.htm
which relies on this CSS hack applied to the TH:
{
top:expression(document.getElementById("table_cont ainer_1").scrollTop-0);
}
This example is seamless and solid -- and simple! -- but the problem is
it is too resource intensive on tables more than 100 rows or so... it
slows _EVERYTHING_ down on the page. Some of these tables are 1000
rows and more!
Anyone have any solutions that are less processor-expensive?
Thanks,
Ann
解决方案A couple caveats:
1. Only has to work in IE6 and later
2. Resource Inexpensive
3. The header data is dynamically populated, but Wraps
4. The content is dynamically populated, but Nowraps
**3 and 4 means that the width of the widest data column determines the
width of each column, including the header for that column...
5. I cannot use fixed widths for the columns -- they must be determined
by the width of the dynamic data they display.
Basically, if you look at the example in the URL above, _THAT_ is what
I want in every way, except it is too slow/resource expensive...
Thanks,
Ann
Giggle Girl wrote:I need to lock a TABLE HEADER vertically, so when you scroll up/down,
the content moves but the header is always visible, like you can do in
Excel.
Search the archives of this group for heated discussions of this topic ;)
It is for an intranet app, and only has to work in IE6 (and future
releases).
That is a good thing. It''s easier to support either IE or Firefox(and others
that support a scrollable tbody) but not both.
One similar IE-only solution I have done is:
http://www.mattkruse.com/temp/floating_header.html
This is especially useful when there are multiple long tables on a page, and
you want to scroll the page like normal yet have the header rows "stick".
I''ve used this method many times and everyone seems to like it.
I have a working example at:
http://c.1asphost.com/giggy/locked_h...in/default.htm
which relies on this CSS hack applied to the TH:
{
top:expression(document.getElementById("table_cont ainer_1").scrollTop-0);
}
There are two main problems:
1. Expressions get evaluated constantly, with every mouse move, even if your
user interaction doesn''t impact the expression evaluation. This is bad
design by IE, IMO.
2. Your document.getElementById() call is going to be slow. There''s no need
to do it - instead use offsetParent[*] to find the scrollable container,
which should speed things up quite a bit.
Also, you should consider adding the rule to the TR rather than each TH.
Anyone have any solutions that are less processor-expensive?
Another option is to ditch expressions and instead have a javascript
function specific to the table that sets the "top" value of the TR when the
container is scrolled. This way expressions aren''t evaluated constantly.
Of course, keep in mind that if your table contains select elements they are
going to show through your headers. Also, if your table has any cell
spacing, the data will bleed through that as well.
I''ve not tested any of these solutions on IE7, so I don''t know how
forward-compatible they are.
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Hey Matt,
thanks for your reply:
2. Your document.getElementById() call is going to be slow.
There''s no need to do it - instead use offsetParent[*] to find the
scrollable container, which should speed things up quite a bit.
Could you supply me with the correct code for this, that I can plug
right in? (I have never used offsetParent and don''t know where to put
it...)
And yes, I had searched the archives befoer posting and saw many
threads doing stuff similar, and some posts by you, as well. Nothing
was quite what I wanted (that I have seen so far.)
Regarding the sample you provided, it won''t work for my purposes. No
offense, but it is too clunky, the way it jiggles, IMO. One thing I
loved about the example I provided was how "solid" it was; no jiggle.
Thanks so much for your reply! (Yay, Matt Kruse replied -- one of the
stars here!)
Thanks,
Ann
这篇关于锁定表头（如Excel）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
