I first release the CSS style, but this can be ignored directly.
Copy codeThe 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.
Copy codeThe Code is as follows:
<Div id = "page">
<Table class = "datagrid" cellpadding = "0" cellspacing = "0">
<Thead>
<Tr>
<Th> <input id = "CheckAll" name = "checkall" type = "checkbox"/> </th>
<Th> ID </th>
<Th> title </th>
<Th> released by </th>
<Th> release date </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "check"/> </td>
<Td align = "center" width = "5%"> 1 </td>
<Td> what are the three things Alibaba has done right? </Td>
<Td align = "center" width = "10%"> internet </td>
<Td align = "center" width = "15%"> 2013-07-01 </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "check"/> </td>
<Td align = "center" width = "5%"> 2 </td>
<Td> big check: 16 traditional industries rewritten by the Internet </td>
<Td align = "center" width = "10%"> internet </td>
<Td align = "center" width = "15%"> 2013-07-01 </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "check"/> </td>
<Td align = "center" width = "5%"> 3 </td>
<Td> what if the smartphone market changes? </Td>
<Td align = "center" width = "10%"> internet </td>
<Td align = "center" width = "15%"> 2013-07-01 </td>
</Tr>
<Tr>
<Td align = "center"> <input type = "checkbox" name = "check"/> </td>
<Td align = "center" width = "5%"> 4 </td>
<Td> let's see how Ford defended against Google apple? </Td>
<Td align = "center" width = "10%"> internet </td>
<Td align = "center" width = "15%"> 2013-07-01 </td>
</Tr>
</Tbody>
</Table>
</Div>
Implement Functions
1) Click the row to change the background color.
Copy codeThe 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)