Jquery | 基础 | 项目实践

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 
  5 <head>
  6     <meta charset="utf-8">
  7     <title> 数据管理 </title>
  8     <script type="text/javascript" src="jquery-1.8.2.min.js">
  9 
 10 
 11 
 12     </script>
 13     <style type="text/css">
 14         body {
 15             font-size: 12px
 16         }
 17 
 18         table {
 19             width: 360px;
 20             border-collapse: collapse
 21         }
 22 
 23         table tr th,
 24         td {
 25             border: solid 1px #666;
 26             text-align: center
 27         }
 28 
 29         table tr td img {
 30             border: solid 1px #ccc;
 31             padding: 3px;
 32             width: 42px;
 33             height: 60px;
 34             cursor: hand
 35         }
 36 
 37         table tr td span {
 38             float: left;
 39             padding-left: 12px;
 40         }
 41 
 42         table tr th {
 43             background-color: #ccc;
 44             height: 32px
 45         }
 46 
 47         .clsImg {
 48             position: absolute;
 49             border: solid 1px #ccc;
 50             padding: 3px;
 51             width: 85px;
 52             height: 120px;
 53             background-color: #eee;
 54             display: none
 55         }
 56         .clsSpan {
 57             position: absolute;
 58             border: solid 1px #ccc;
 59             padding: 3px;
 60             width: 80px;
 61            
 62             background-color: rgba(93, 184, 146, 0.884);
 63             display: none
 64         }
 65 
 66         .btn {
 67             border: #666 1px solid;
 68             padding: 2px;
 69             width: 50px;
 70             filter: progid:DXImageTransform.Microsoft .Gradient(GradientType=0, StartColorStr=#ffffff,
 71                 EndColorStr=#ECE9D8);
 72         }
 73     </style>
 74     <script type="text/javascript">
 75         $(function () {
 76             $("table tr:nth-child(odd)")
 77                 .css("background-color", "#eee"); // 隔行变色
 78             /** 全选复选框单击事件 **/
 79             $("#chkAll").click(function () {
 80                 if (this.checked) {// 如果自己被选中
 81                     $("table tr td input[type=checkbox]")
 82                         .attr("checked", true);
 83                 }
 84                 else {// 如果自己没有被选中
 85                     $("table tr td input[type=checkbox]")
 86                         .attr("checked", false);
 87                 }
 88             })
 89             /** 删除按钮单击事件 **/
 90             $("#btnDel").click(function () {
 91                 var intL = $("table tr td  input:checked:not('#chkAll')").length;
 92                 // 获取除全选复选框外的所有选中项
 93                 if (intL != 0) {// 如果有选中项
 94                     $("table tr td input[type=checkbox]:not('#chkAll')")
 95                         .each(function (index) {// 遍历除全选复选框外的行
 96                             if (this.checked) {// 如果选中
 97                                 $("table tr[id=" + this.value + "]").remove();
 98                                 // 获取选中的值，并删除该值所在的行
 99                             }
100                         })
101                 }
102             })
103             /** 小图片鼠标移动事件 **/
104             var x = 5; var y = 15;// 初始化提示图片位置
105             $("table tr td img").mousemove(function (e) {
106                 $("#imgTip")
107                     .attr("src", this.src)// 设置提示图片 scr 属性
108                     .css({
109                         "top": (e.pageY + y) + "px",
110                         "left": (e.pageX + x) + "px"
111                     })// 设置提示图片的位置
112                     .show(30);// 显示图片
113             })
114             /** 小图片鼠标移出事件 **/
115             $("table tr td img").mouseout(function () {
116                 $("#imgTip").hide();// 隐藏图片
117             })
118             // 文本值
119              $("table tr td div").mousemove(function (e) {
120                 $("#spanTip")
121                     .text($(this).text())
122                     .css({
123                         "top": (e.pageY + y) + "px",
124                         "left": (e.pageX + x) + "px"
125                     })// 设置提示图片的位置
126                     .show(30);// 显示图片
127             })
128             /** 文本鼠标移出事件 **/
129             $("table tr td div").mouseout(function () {
130                 $("#spanTip").hide();// 隐藏图片
131             })
132         })
133     </script>
134 </head>
135 
136 <body>
137     <table>
138         <tr>
139             <th> 选项 </th>
140             <th> 编号 </th>
141             <th> 封面 </th>
142             <th> 购书人 </th>
143             <th> 性别 </th>
144             <th> 购书价 </th>
145             <th>书名</th>
146         </tr>
147         <tr id="0">
148             <td><input id="Checkbox1" type="checkbox" value="0" /></td>
149             <td>1001</td>
150             <td><img src="Images/img03.jpg" alt="" /></td>
151             <td> 李小明 </td>
152             <td> 男 </td>
153             <td>35.60 元 </td>
154             <td><div>ASP.NET</div> </td>
155         </tr>
156         <tr id="1">
157             <td><input id="Checkbox2" type="checkbox" value="1" /></td>
158             <td>1002</td>
159             <td><img src="Images/img04.jpg" alt="" /></td>
160             <td> 刘明明 </td>
161             <td> 女 </td>
162             <td>37.80 元 </td>
163             <td><div>C#网站开发</div> </td>
164         </tr>
165         <tr id="2">
166             <td><input id="Checkbox3" type="checkbox" value="2" /></td>
167             <td>1003</td>
168             <td><img src="Images/img08.jpg" alt="" /></td>
169             <td> 张小星 </td>
170             <td> 女 </td>
171             <td>45.60 元 </td>
172             <td> <div>ASP</div>  </td>
173         </tr>
174     </table>
175     <table>
176         <tr>
177             <td style="text-align:left;height:28px">
178                 <span><input id="chkAll" type="checkbox" /> 全选 </span>
179                 <span><input id="btnDel" type="button" value=" 删除 " class="btn" /></span>
180             </td>
181         </tr>
182     </table>
183     <img id="imgTip" class="clsImg" src="Images/img03.gif" />
184     <div id="spanTip" class="clsSpan" style="font-size:20px;"></div>
185     
186 </body>
187 
188 </html>

 

posted @ 2018-10-22 11:28  听说这是最长的名字了  阅读(514)  评论(0)    收藏  举报