Use jQuery to achieve full or invert selection, and click a row to change the background color. The specific code is as follows. If you are interested, refer to the following code. I hope to help you to release the CSS style first, in fact, this can be ignored directly.
The Code is as follows:
Body {margin: 0; padding: 0; font-size: 12px; font-family: ;}
. Datagrid {width: 100% ;}
. Required IRD tr th {background-color: #191970; font-size: 14px ;}
. Datagrid tr th,. datagrid tr td {border: 1px solid # ccc; border-collapse: collapse ;}
/* Select the row style */
. Table-row-selected {background: # fff68f ;}
Let's take a look at the HTML structure of the page.
The Code is as follows:
|
ID |
Title |
Publisher |
Release Date |
|
1 |
What are the three things Alibaba has done right? |
Internet |
2013-07-01 |
|
2 |
Big check: 16 traditional industries rewritten by the Internet |
Internet |
2013-07-01 |
|
3 |
What if the smartphone market changes? |
Internet |
2013-07-01 |
|
4 |
Let's see how Ford defended against Google apple? |
Internet |
2013-07-01 |
Implement Functions
1) Click the row to change the background color.
The Code is as follows:
$ (". Datagrid tbody tr"). bind ("click", function (){
Var oThis = $ (this );
If (oThis. hasClass ("table-row-selected ")){
OThis. removeClass ("table-row-selected ");
OThis. children ("td: eq (0)"). children ("input [name = 'check']"). removeAttr ("checked ");
} Else {
OThis. addClass ("table-row-selected ");
OThis. children ("td: eq (0)"). children ("input [name = 'check']"). attr ("checked", "checked ");
}
});
2) Select All/select all (unfinished, to be continued)