jQuery对表格操作
2014-01-07 22:24
239 查看
<html> <head> <script type="text/javascript" > $(function() { $("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色 /**全选复选框单击事件**/ $("#chkAll").click(function() { if (this.checked) {//如果自己被选中 $("table tr td input[type=checkbox]:not('#chkOther')").attr("checked", true); } else {//如果自己没有被选中 $("table tr td input[type=checkbox]:not('#chkOther')").attr("checked", false); } }) /*反选复选框单击事件*/ $('#chkOther').click(function(){ $("#list :checkbox").each(function(){ // $(this).attr("checked", !$(this).attr("checked")); if (this.checked) { $(this).attr("checked", false); } else { $(this).attr("checked", true); } }) }); /**删除按钮单击事件**/ $("#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(); //获取选中的值,并删除该值所在的行 } }) } }) /**小图片鼠标移动事件**/ var x = 5; var y = 15;//初始化提示图片位置 $("table tr td img").mousemove(function(e) { $("#imgTip") .attr("src", this.src)//设置提示图片scr属性 .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })//设置提示图片的位置 .show(300);//显示图片 }) /**小图片鼠标移出事件**/ $("table tr td img").mouseout(function() { $("#imgTip").hide();//隐藏图片 }) }) </script> </head> <body> <table id="list"> <tr> <th>选项</th> <th>编号</th> <th>封面</th> <th>购书人</th> <th>性别</th> <th>购书价</th> </tr> <tr id="0"> <td><input id="Checkbox1" type="checkbox" value="0"/></td> <td>1001</td> <td><img src="Images/img03.jpg" alt="" /></td> <td>李小明</td> <td>男</td> <td>35.60 元</td> </tr> <tr id="1"> <td><input id="Checkbox2" type="checkbox" value="1"/></td> <td>1002</td> <td><img src="Images/img04.jpg" alt="" /></td> <td>刘明明</td> <td>女</td> <td>37.80 元</td> </tr> <tr id="2"> <td><input id="Checkbox3" type="checkbox" value="2"/></td> <td>1003</td> <td><img src="Images/img08.jpg" alt="" /></td> <td>张小星</td> <td>女</td> <td>45.60 元</td> </tr> </table> <table> <tr> <td style="text-align:left;height:28px"> <span><input id="chkAll" type="checkbox" />全选/全不选</span> <span><input id="chkOther" type="checkbox" />反选 </span> <span><input id="btnDel" type="button" value="删除" class="btn" /></span> </td> </tr> </table> <img id="imgTip" class="clsImg" src="Images/img03.gif"/> </body> </html>
相关文章推荐
- jQuery 05 表单操作/表格操作
- jquery操作表格 合并单元格
- 锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作
- jQuery对表单、表格的操作及更多应用(上:表单应用)
- jQuery应用操作之---表格
- jquery操作表格行(增加、删除)
- 基于jQuery的表格操作插件
- JQuery操作表格(隔行着色,高亮显示,筛选数据)
- 使用jQuery对表格的操作,组织JSON字符串
- jQuery对表单表格的操作及更多应用
- JQuery实现动态操作表格
- jQuery 可编辑表格文本域,支持键盘快捷操作
- jQuery对表单、表格的操作及更多应用(中:表格应用)
- jquery+ajax操作控件--表格
- 第5章 jQuery对表单、表格的操作及更多应用
- jQuery 5 对表单表格的操作及更多应用
- 用jquery代码实现表格行列的增删操作(每行编号随之修改)
- 《锋利的jQuery》要点归纳(四)jQuery对表单、表格的操作及更多应用(上:表单应用)
- jquery操作表格上下移动行
- 提高表格操作的十五款jQuery插件