Jquery selects rows and columns in a table

Http://www.61dh.com/blog/2008/09/jquery-table.html#demo1

Jquery selects rows and columns in a table

Jquery provides powerful functions for table processing, such as sorting specific rows or columns in a table, and changing the style. If your English is good enough, you can read this article.Article: Jquery table manipulation. This article only describes how to use jquery statements to select rows and columns in a table and make some simple style changes. We hope it can help you with deep learning of jquery table processing.

For example, we have a table:

First column	Column 2	Column 3	Column 4
First column	Column 2	Column 3	Column 4
First column	Column 2	Column 3	Column 4
First column	Column 2	Column 3	Column 4
First column	Column 2	Column 3	Column 4

It is relatively easy to operate on rows:

1. If we want to select the first line, we can use$ ('Tr: eq (0 )')
2. If we want to select row N, we can use$ ('Tr: eq (n-1 )')
3. If we want to select an odd number of rows, we can use$ ('Tr: odd ')
4. If we want to select an even number of rows, we can use$ ('Tr: even ')

Column operations are a little complicated, but it is not difficult if we know the principle. The table does not contain column elements. The first column is actually a combination of the first region (TD) of each row. So we can use loops to select rows.

1. If we want to select the first column and change its style, we can use the following statement to implement

    
   $ (Document). Ready (Function(){
    
    
   $ ('Table ').Find('Td '). Each (Function(I ){// Search for each interval in the table
    
   If(I % 4 = 0 ){// '4' indicates that the table has four columns in total. If the interval number is divided by four, it belongs to the first column.
    
    
   $ (This). Addclass ('col _ 1 ');}// Add a specific style to the interval
    
    
   });
    
    
   });
    

3. If we want to select other columns, we only needCodeInI % 4 = 0. Remember: 4 represents the number of columns in the table. If you have 10 columns, use 10 instead. Select the first column, where the remainder is equal to 0. Select the second column, and the remainder is equal to 1.

Demo:Click to change the first column of the preceding table.

Update (2009/10/20 ):Thanks to Joe! My method requires you to change the column data of the table, while Joe's method is not only independent of the column data limit.

 
$ (Document). Ready (Function(){
 
 
$ ('# Button1'). Click (Function(){
 
$ ('# Demo1 tr'). Each (Function(){
 
 
$ (This).Find("TD: first"2.16.css ({color:" red ", fontweight :"Bold"});
 
 
});
 
 
});
 
});
 
 
Demo:Click to change the first column of the preceding table. 
 
 
You can also change the selector to change the even data column or odd data column.Note: The first column starts with 0, so TD: Odd indicates the even data column. 
 
 
<SCRIPT type ="Text/JavaScript">
 
 
$ (Document). Ready (Function(){
 
$ ('#10200902'). Click (Function(){
 
 
$ ('# Demo1 tr'). Each (Function(){
 
 
// Alert ("me ");
 
$ (This).Find("TD: odd"Developer.css ({color :"Green", Fontweight :"Bold"});
 
 
});
 
 
});
 
 
});
 
</SCRIPT>
 
 
 
 
// Note: the first column starts from 0, so TD: Odd indicates the even data column.
 
 
<Button id ="10200902"> Click to change the even data column of the table above </button>