Common table functions

From: http://www.javaeye.com/topic/288115

This section provides a comprehensive example of some common table operations, including row-striped highlighted toolbar prompting extended folding filtering and other effects.

As follows:

Below I will explain the example I have written:

1. Row stripe

Js Code

1. VarRowIndex = 0;
2. $ ("Tbody tr"). each (Function(Index ){
3. If($ ("Th ",This). Length) {// check whether the current row contains the th Element
4. $ (This). AddClass ("subhead ");
5. RowIndex =-1;
6. }
7. Else{
8. If(RowIndex % 4 <2 ){
9. $ (This). RemoveClass ("odd"). addClass ("even"); // Add the even style for the odd Array
10. }
11. Else{
12. $ (This). RemoveClass ("even"). addClass ("odd"); // Add an odd style to an even group
13. }
14. }
15. RowIndex ++;
16. )};

Var rowIndex = 0; $ ("tbody tr "). each (function (index) {if ($ ("th", this ). length) {// check whether the current row contains the th element $ (this ). addClass ("subhead"); rowIndex =-1;} else {if (rowIndex % 4 <2) {$ (this ). removeClass ("odd "). addClass ("even"); // Add the even style for the odd array} else {$ (this ). removeClass ("even "). addClass ("odd"); // Add an odd style to an even group} rowIndex ++ ;)};

This code (rowIndex % 4 <2) is a set of alternating colors in two rows.

If there are three rows and one group of alternating colors, it is rowIndex % 6 <3,... and so on.

In general, the most commonly used method is the interlace color change, which is easier than the alternating color change of the two rows.

Jquery provides the following methods:

: Even: matches all elements with an even index value and starts counting from 0. For example, $ ("tr: even ");

: Odd: matches all elements with an odd index value and starts counting from 0. For example, $ ("tr: odd ").

Or: nth-child (index): matches the nth child or parity element under the parent element, and starts counting from 1. For example (": nth-child (2)" even rows)

2. Highlight (highlight rows)

Js Code

1. VarColumn = 3;
2. $ ("Table. striped tbody tr"). each (Function(Index ){
3. $ ("Td: nth (" + column + ")",This). AddClass ("clickable"). click (Function(){
4. VarThisClicked = $ (This). Text (); // assign the content of the currently clicked td tag to the variable
5. $ ("Table. striped tbody tr"). each (Function() {// Traverse all tr tags in the tbody
6. If(ThisClicked === ("td: nth (" + column + ")",This). Text () {// check whether the current column of the tbody matches the content of the clicked td tag.
7. $ (This). AddClass ("highlight ");
8. }
9. Else{
10. $ (This). RemoveClass ("highlight ");
11. }
12. });
13. })
14. });

Var column = 3; $ ("table. striped tbody tr "). each (function (index) {$ ("td: nth (" + column + ")", this ). addClass ("clickable "). click (function () {var thisClicked = $ (this ). text (); // assign the content of the currently clicked td tag to the variable $ ("table. striped tbody tr "). each (function () {// traverse all tr tags in the tbody if (thisClicked ==$ ("td: nth (" + column + ")", this ). text () {// check whether the current column of the tbody matches the content of the clicked td tag ). addClass ("highlight");} else {$ (this ). removeClass ("highlight ");}});})});

This code can enhance the visual effect of the table and highlight relevant rows based on user interaction.

3. Toolbar prompt

Js Code

1. VarHighlighted = "";
2. // Positioning tool prompt bar
3. VarPositionTooltip =Function(Event ){
4. VarTPosX = event. pageX-5;
5. VarTPosY = event. pageY + 20;
6. $ ("Div. tooltip" ).css ({left: tPosX, top: tPosY });
7. };
8. // Display the tooltip
9. VarShowTooltip =Function(Event ){
10. $ ("Div. tooltip"). remove ();
11. Var$ ThisTopic = $ (This). Text ();
12. If($ (This). Parent (). is (". highlight") {// check whether the current tr style is highlight
13. Highlighted = "un -";
14. }
15. Else{
16. Highlighted = ""
17. }
18. $ ("<Div class = 'tooltip '> Click to" + highlighted + "highlight all topics written by" + $ thisTopic + "</div> "). appendTo ("body ");
19. // Add content to the tooltip,
20. // If the current tr style is highlight, the content of the toolbar is: Click to un-highlight all topics written by $ thisTopic;
21. // If the current tr style is not highlight, the content of the toolbar is: Click to highlight all topics written by $ thisTopic.
22. PositionTooltip (event );
23. };
24. // Hide the tooltip
25. VarHideTooltip =Function(){
26. $ ("Div. tooltip"). remove ();
27. };

Var highlighted = ""; // The positioning tool prompts var positionTooltip = function (event) {var tPosX = event. pageX-5; var tPosY = event. pageY + 20; $ ("div. tooltip "detail .css ({left: tPosX, top: tPosY}) ;}; // display the tooltip var showTooltip = function (event) {$ (" div. tooltip "). remove (); var $ thisTopic = $ (this ). text (); if ($ (this ). parent (). is (". highlight ") {// check whether the current tr style is highlight highlighted =" un -";} else {highlighted = "" }$ ("<div class = 'tooltip '> Click to" + highlighted + "highlight all topics written by" + $ thisTopic + "</div> "). appendTo ("body"); // add content to the prompt bar of the tool. // if the current tr style is highlight, the content of the toolbar is: click to un-highlight all topics written by $ thisTopic; // if the current tr style is not highlight, the toolbar content is: Click to highlight all topics written by $ thisTopic. positionTooltip (event) ;}; // hide the tooltip var hideTooltip = function () {$ ("div. tooltip "). remove ();};

Although the row highlight effect is a very useful feature, the existence of these features is not obvious to users. Although we can add a clickable class for all the labels to be clicked so that when the mouse cursor is hovering over these labels, the cursor turns into a hand shape. When the user still does not know what will happen when the label is clicked. To this end, it is necessary to further add instructions on what will happen with the click.

4. Fold and expand

Js Code

1. VarToggleMins = "images/iconopen.gif ";
2. VarTogglePlus = "images/iconclose.gif ";
3. Var$ SubHead = $ ("tbody th: first-child ");
4. $ SubHead. prepend (" ");
5. $ ("Img", $ subHead). addClass ("clickable"). click (Function(){
6. VarToggleSrc = $ (This). Attr ("src ");
7. If(ToggleSrc = toggleMins ){
8. $ (This). Attr ("src", togglePlus). parents ("tr"). siblings (). fadeOut ("fast ");
9. }
10. Else{
11. $ (This). Attr ("src", toggleMins). parents ("tr"). siblings (). not (". filtered"). fadeIn ("fast ");
12. }
13. });

var toggleMins = "images/iconopen.gif"; var togglePlus = "images/iconclose.gif"; var $subHead = $("tbody th:first-child"); $subHead.prepend("
Here, the fadeIn (speed) and fadeOut (speed) methods are used,Speed(String, Number): A String ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value indicating the animation duration (for example, 1000)
When a table contains a large amount of data in groups, if the content of a part of the table can be folded or hidden, Page scrolling can be reduced, this allows you to view all the data in the table more clearly.

5. Filter by Topic Column)
Js Code


 

 
  
$ ("Table. striped"). each (Function(){
 
  
Var$ Table = $ (This);
 
  
$ Table. find ("th"). each (Function(){
 
  
If($ (This). Is (". filter-column ")){
 
  
// Assign the div with the filter-column style to the variable $ filters
 
  
Var$ Filters = $ ("<div class = 'filter-column'> This). Text () + ":  
  
// Add all the keywords in the topic column to the keywords Array
 
  
VarKeywords = {};
 
  
$ Table. find ("tbody tr td"). filter (": nth-child (" + (column + 1) + ")"). each (Function(){
 
  
Keywords [$ (This). Text ()] = $ (This). Text ();
 
  
});
 
  
// Add an all button to the div with the filter-column Style to display all table rows.
 
  
$ ("<Div class = 'filter'> all </div>"). click (Function(){
 
  
$ Table. find ("tbody tr"). show ();
 
  
$ (This). AddClass ("active"). siblings (). removeClass ("active ");
 
  
$ ("Img", "tbody tr th"). attr ("src", toggleMins );
 
  
}). AddClass ("clickable active"). appendTo ($ filters );
 
  

 
  
$. Each (keywords,Function(Index, keyword ){
 
  
$ ("<Div class = 'filter'> </div>"). text (keyword). bind ("click", {"keyword": keyword },Function(Event ){
 
  
$ Table. find ("tbody tr"). each (Function(){
 
  
If($ ("Td ",This). Filter (": nth-child (" + (column + 1) + ")"). text () = event. data ["keyword"]) {
 
  
$ (This). Show ();
 
  
}
 
  
Else If($ ("Th ",This). Length = 0 ){
 
  
$ (This). Hide ();
 
  
}
 
  
});
 
  
$ (This). AddClass ("active"). siblings (). removeClass ("active ");
 
  
}). AddClass ("clickable"). appendTo ($ filters); // Add the div whose content is the keywords style and filter to the div whose style is filter-column.
 
  
});
 
  
$ Filters. insertBefore ($ table); // Insert the div with the filter-column style to the table.
 
  
}
 
  
});

 
$ ("Table. striped "). each (function () {var $ table = $ (this); $ table. find ("th "). each (function () {if ($ (this ). is (". filter-column ")) {// assign the div with the filter-column style to the variable $ filters var $ filters = $ ("<div class = 'filter-column'> 
By displaying only the table rows matching the given conditions to the user, you can avoid unnecessary distractions.

You can see the running effect of the attachment.

  

 
   

 
   
The size is 155.9 KB.

  

  

 
   
Table.rar (40 KB)
 
   
Downloads: 126