jQuery selects rows and columns in a table and changes simple styles_jquery

jQuery provides quite powerful functions for table processing, such as sorting specific rows or columns, changing styles, etc. If your English is good enough, you can read this article: jQuery table manipulation. This article only introduces how to use jQuery statements to select rows and columns in tables and make some simple style changes. I hope it can provide some help for in-depth learning of jQuery table processing.

For example, we have a table like this :

第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列

It is relatively simple to operate rows:
1. If we want to select the first row, we can use $("tr:eq(0)")
2 .If we want to select the Nth row, 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 even-numbered rows, we can use $("tr:even")
The column operation is a little more troublesome, but it is not difficult if we know the principle. There are no column elements in the table. The first column is actually the combination of the first area (td) of each row. So we can use a loop to select rows.
1. If we want to select the first column and change its style, we can use the following statement to achieve it

Copy code The code is as follows:

$(document).ready(function(){
$("table").find("td").each(function(i){ //Search for each interval in the table
if(i%4 == 0){ //'4' means that the table has a total of 4 columns. If the interval number is divisible by 4, then it belongs to the first column
$(this).addClass("col_1");}//Add a specific style to the interval
});
});

2. If we want to choose other column, just change i%4==0 in the above code and make corresponding changes. Remember: 4 represents the number of columns in the table. If you have 10 columns, replace it with 10; select the first column, the remainder should be equal to 0, select the second column, the remainder should be equal to 1, and so on.
Update (2009/10/20): Thanks JOE for the addition! My method requires artificially changing the number of columns in the table, while JOE's method is not only simple in code but also not limited by the number of columns.

Copy code The code is as follows:

$(document).ready(function(){
$("#button1").click(function(){
$("#demo1 tr").each(function() {
$(this).find("td:first") .css({color:"red", fontWeight:"bold"});
});
});
});

You can also change the selection converter to change the even or odd columns. Note: The first column starts from 0, so td:odd represents even columns.

Copy code The code is as follows:

//Note: The first column starts from 0, so td:odd represents the even column
Click to change the even columns of the above table