: Table Data interlace, delete data, select all Delete, mouse move to picture display picture preview
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> Data Management </TITLE>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script language= "javascript" type= "Text/javascript" src= "Jquery-1.8.3.min.js" >
</script>
<style type= "Text/css" >
BODY{FONT-SIZE:12PX}
Table{width:360px;border-collapse:collapse}
Table TR th,td{border:solid 1px #666; Text-align:center}
Table TR TD img{border:solid 1PX #ccc;p Adding:3px;width:42px;height:60px;cursor:hand}
Table TR TD span{float:left;padding-left:12px}
Table TR th{background-color: #ccc; height:32px}
. clsimg{position:absolute;border:solid 1px #ccc;p adding:3px;width:85px;height:120px;background-color: #eee; Display:none}
. Btn{border: #666 1px solid;padding:2px;width:50px;filter:progid;dximagetransform.microsoft.gradient (GradientType =0,startcolorstr= #ffffff, endcolorstr= #ECE9DB);}
</style>
<script type= "Text/javascript" >
$ (function () {
/** interlace Color **/
$ ("Table tr:nth-child (Odd)"). CSS ("Background-color", "#eee");
/** Select all check box click event **/
$ ("#chkAll"). Click (function () {
if (this.checked) {
$ ("Table tr TD Input[type=checkbox]"). attr ("Checked", true);
}else{
$ ("Table tr TD Input[type=checkbox]"). attr ("checked", false);
}
});
/** Delete button click event **/
$ ("#btnDel"). Click (function () {
var IntL = $ ("Table tr TD input:checked:not (' #chkAll ')"). Length;
if (IntL!=0) {
$ ("Table tr TD input[type=checkbox]:not (' #chkAll ')"). Each (function (index) {
if (this.checked) {
$ ("Table tr[id=" +this.value+ "]"). Remove ();
}
});
}
});
/** Small Picture Mouse move event **/
var x = 5; var y = 15;
$ ("Table tr td img"). MouseMove (function (e) {
$ ("#imgTip"). attr ("src", this.src). css ({"Top":(e.pagey+y) + ' px ', ' left ':(e.pagex+x) + ' px '}. Show (3000);
});
/** small picture Mouse move out event **/
$ ("Table tr td img"). Mouseout (function () {
$ ("#imgTip"). Hide ();
});
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<th> Options </th>
<th> number </th>
<th> cover </th>
<th> Book Holder </th>
<th> Sex </th>
<th> Buy Book Price </th>
</tr>
<tr id= "0" >
<td><input id= "Checkbox1" type= "checkbox" value= "0"/></td>
<td>1001</td>
<td></td>
<td> Liu Mingming </td>
<td> Women </td>
<td>37.80 Yuan </td>
</tr>
<tr id= "1" >
<td><input id= "Checkbox2" type= "checkbox" value= "1"/></td>
<td>1002</td>
<td></td>
<td> Ted </td>
<td> male </td>
<td>35.60 Yuan </td>
</tr>
<tr id= "2" >
<td><input id= "Checkbox3" type= "checkbox" value= "2"/></td>
<td>1003</td>
<td></td>
<td> Zhangxiaoxing </td>
<td> Women </td>
<td>45.60 Yuan </td>
</tr>
</table>
<table>
<tr>
<TD style= "text-align:left;height:28px" >
<span>
<input id= "Chkall" type= "checkbox"/> Select all
</span>
<span>
<input id= "Btndel" type= "button" value= "delete" class= "btn"/>
</span>
</td>
</tr>
</table>
</BODY>
</HTML>
