I first put the CSS style out, in fact, this can be directly ignored
Copy Code code as follows:
body{margin:0;padding:0;font-size:12px;font-family: Microsoft Ya-hei;}
. datagrid{width:100%;}
. Datagird tr th{background-color: #191970; font-size:14px;}
. DataGrid tr th,. DataGrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* Select Line Style * *
. Table-row-selected{background: #fff68f;}
Let's look at the page HTML structure again
Copy Code code 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> Publishers </th>
<th> release Time </th>
</tr>
</thead>
<tbody>
<tr>
<td align= "center" ><input type= "checkbox" name= "Check"/></td>
<td align= "center" width= "5%" >1</td>
What three things did
<td> Ali do 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> Market Point: 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> If the smartphone market changes, what about the cool guys? </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> See how Ford defends against Google Apple? </td>
<td align= "center" width= "10%" >internet</td>
<td align= "center" width= "15%" >2013-07-01</td>
</tr>
</tbody>
</table>
</div>
Implementation features
1) Click the row to change the background color
Copy Code code 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/Anti-election function (not completed, to be continued)