Jquery-integrated instance-Fixed Header, scrolling table content

Source: Internet
Author: User
Jquery-integrated instance-Fixed Header, scrolling table content [Source Code]

<HTML>
<Head>
<SCRIPT src = "jquery-1.2.js"> </SCRIPT>
<SCRIPT>
$ (Document). Ready (function (){
For (var y = 1; y <20; y ++ ){
$ ("# Table_y "). append ("<tr style = 'height: 100px; '> <TD style = 'width: 90px;'>" + Y. tostring () + "</TD> </tr> ");
$ ("# Table_xy "). append ("<tr y = '" + Y. tostring () + "'style = 'height: 100px; '> </tr> ");;
}
For (VAR x = 1; x <20; X ++ ){
$ ("# Table_x TR"). append ("<TD style = 'width: 100px; '>" + X. tostring () + "</TD> ");
$ ("# Table_xy TR"). Each (function (index, element ){
Var y = $ (element). ATTR ("Y ");
$ (Element ). append ("<TD style = 'width: 100px; '>" + X. tostring () + "& nbsp; * & nbsp;" + Y + "& nbsp ;=& nbsp;" + (x * Y ). tostring () + "</TD> ");
});
}
$ ("# Divxy"). Scroll (function (){
$ ("# DivX"). Get (0). scrollleft = This. scrollleft;
$ ("# Divy"). Get (0). scrolltop = This. scrolltop;
});
});
</SCRIPT>
</Head>
<Body>
<Table>
<Tr>
<TD>
</TD>
<TD>
<Div id = "DivX" style = "width: 400px; Height: 100px; overflow: hidden">
<Table id = "table_x" border = "1" style = "width: 2000px;">
<Tr style = "height: 90px;">
</Tr>
</Table>
</Div>
</TD>
</Tr>
<Tr>
<TD>
<Div id = "divy" style = "width: 100px; Height: 400px; overflow: hidden">
<Table id = "table_y" border = "1">
</Table>
</Div>
</TD>
<TD>
<Div id = "divxy" style = "width: 400px; Height: 400px; overflow: scroll">
<Table id = "table_xy" border = "1" style = "width: 2000px;">
</Table>
</Div>
</TD>
</Tr>
</Table>
</Body>
</Html>

[Jquery-Official Website]

Http://jquery.com/

[Jquery-]

Current version, & nbsp; http://docs.jquery.com/Release:jQuery_1.2.1
Download list, http://docs.jquery.com/Downloading_jQuery
Latest code, http://code.jquery.com/nightlieS/jquery-nightly.js
[Jquery-related forums]

Http://groups.google.com/group/jquery-en
Http://WebDev.board.newsmth.net/
Http://WebGeeks.board.newsmth.net/
Http://bbs.pku.edu.cn/, homepage watch
Http://forum.csdn.net/SList/JavaScript/
[Jquery-keywords]

Jquery
[Jquery-core]

Each iteration and http://docs.jquery.com/Core/each
Jquery, http://docs.jquery.com/Core/jQuery
[Jquery-Ajax]

Jquery Ajax documentation, http://docs.jquery.com/Ajax/jQuery.ajax
Ajax options for jquery, http://docs.jquery.com/Ajax/jQuery.ajax#options
Datatype option, set the return value type
Timeout option, used to set timeout
Integration with PHP can use json_encode to return results, http://www.php.net/manual/zh/function.json-encode.php

Readystate gets the current state of the request action, http://msdn2.microsoft.com/en-us/library/ms534361.aspx

[Jquery-special effects]

Jquery light effect, http://docs.jquery.com/Effects/fadeIn

[Jquery-selectors selector]

Form element selector, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors
Attribute equality selector, http://docs.jquery.com/Selectors/attributeEquals
Checked selected, http://docs.jquery.com/Selectors/checked

: Input matches all input, textarea, select and button elements, http://docs.jquery.com/Selectors/input

When selecting the title tag in the body, the selector will have a different effect than expected.

Element matches all elements by specified name, http://docs.jquery.com/Selectors/element

[Jquery-attributes]

Val gets the content of the First Matching Element value attribute, http://docs.jquery.com/Attributes/val

[Jquery-common functions] ATTR accesses custom attributes to reduce code and data coupling in JavaScript scripts

Filter, used to filter elements in a set
[Jquery-events event]

Hover, http://docs.jquery.com/Events/hover
Submit, http://docs.jquery.com/Events/submit

Focus responds to focus events for each matching element, http://docs.jquery.com/Events/focus

Click click, trigger the click event for each matching element, bind the function to the click event for each matching element, http://docs.jquery.com/Events/click

[Jquery-manipulation operation]

After inserting content after each matching element, http://docs.jquery.com/Manipulation/after

[Jquery-Traversing traversal tool]

Filter filter, http://docs.jquery.com/Traversing/filter
Find lookup, http://docs.jquery.com/Traversing/find
[Jquery-tutorials tutorial]

Introducing $ (document). Ready (), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

[Jquery-plugins plugin]

Easing motion, http://jquery.com/plugins/project/easing
Jcarouselite, headlight effect, http://jquery.com/plugins/project/jCarouselLite
Tablefilter, table filter, http://jquery.com/plugins/project/tableFilter
Rounded corner rounded rectangular, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images
[Jquery-utilities utility]

Trim removes spaces before and after the string, http://docs.jquery.com/Utilities/jQuery.trim

[Jquery-References]

Http://www.json.org, http://www.json.org/json.js

JScript (Windows Script technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

Prototype property (jscript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx

Parseint method (jscript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

Tostring method (jscript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx

HTTP status codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx

HTML + time:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx

HTA: Application object, http://msdn2.microsoft.com/en-us/library/ms536495.aspx

About cross-frame scripting and security: http://msdn2.microsoft.com/en-us/library/ms533028.aspx for cross-framework scripting and security

How to build tables dynamically: How to dynamically build tables, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Filter property (tabular data control):-Filter Properties (Table Data Control), http://msdn2.microsoft.com/en-us/library/ms531364.aspx

[Jquery-integrated instance]

Implement the first and last effects

Cross-window function call

Timed refresh

Open the specified website in the drop-down list box.

Random Number generated between two boundaries
Text input box and label are automatically replaced

The password input box and tag are automatically replaced

Text input area and tags are automatically replaced

Pre labels provide better line feed processing in IE and Firefox.

Fixed Header, scroll table content

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.