jquery provides a fairly powerful way to handle tables (table), such as sorting table-specific rows (row) or Columns (column), style changes, and so on. If your English is good enough, you can read this article: JQuery table manipulation. This article just describes how to select rows and columns in a table with jquery statements and some simple style changes, and hopefully it will help with the deep learning of jquery table processing.
For example, we have such a form：
| First column |
Second column |
Third column |
Fourth column |
| First column |
Second column |
Third column |
Fourth column |
| First column |
Second column |
Third column |
Fourth column |
| First column |
Second column |
Third column |
Fourth column |
| First column |
Second column |
Third column |
Fourth column |
It 's easier to operate on a row：
1. If we want to select the first line, we can use $ ("Tr:eq (0)")
2. If we want to select the nth line, we can use $ ("Tr:eq (n-1)")
3. If we want to select odd rows, we can use $ ("tr:odd")
4. If we want to select even rows, we can use $ ("Tr:even")
The operation of the column is relatively cumbersome, but it is not difficult if we know the principle. There are no columns in the table, and the first column is actually the combination of the first region (TD) for each row. So we can use loops to implement the choice of rows.
1. If we want to select the first column and change its style, we can use the following statement to implement
Copy Code code as follows:
$ (document). Ready (function () {
$ ("table"). Find ("TD"). each (function (i) {//Search the table for each interval
if (i%4 = = 0) {//' 4 ' represents 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 an interval
});
});
2. If we want to select other columns, we need to change the i%4==0 in the above code accordingly. Remember: 4 represents the number of columns in the table, and if you have 10 columns, use 10 instead; Select the first column, the remainder equals 0, select the second column, the remainder should equal 1, and so on.
Update (2009/10/20): Thanks Joe for filling! My approach is to change the column number of the table, and Joe's method is not only simple but also not limited by column numbers.
Copy Code code 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 selector to change even number columns or odd numbers. Note: The first column starts at 0, so td:odd represents even numbers.
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#10200902"). Click (function () {
$ ("#demo1 tr"). each (function () {
Alert ("Me");
$ (this). Find ("Td:odd"). CSS ({color: "green", FontWeight: "Bold"});
});
});
});
</script>
Note: The first column starts at 0, so td:odd represents even numbers
<button id= "10200902" > Click to change even numbers in the above table </button>
