`
lcy0202
  • 浏览: 176337 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery实现隔行变色、图片放大预览、无刷新批量删除

jquery 
阅读更多

1.页面（html+css）

CSS：body{

text-align:center; margin:0 auto;

 }

table{

width:500px; border-collapse:collapse;text-align:center; margin:0 auto;

}

table tr th,td{

border:solid 1px #666; text-align:center;

}

table tr th{

background-color:#09F;}

table tr td img{

width:80px; height:100px;}

.clsImg{

position:absolute; border:1px solid #096;

display:none; width:240px; height:320px;}

HTML：

<body>

<table>

<tr>

<th>选项</th><th>编号</th><th>封面</th>

</tr>

<tr id="0">

<td><input id="checkbox1" type="checkbox" value="0"/></td>

<td>10001</td>

<td><img  src="psu.jpg" /></td>

</tr>

<tr id="1">

<td><input id="checkbox2" type="checkbox" value="1"/></td>

<td>10002</td>

<td><img  src="psu.jpg" /></td>

</tr>

<tr id="2">

<td><input id="checkbox3" type="checkbox" value="2"/></td>

<td>10003</td>

<td><img  src="psu.jpg" /></td>

</tr>

</table>

 

<table>

<tr><td style="text-align:left; height:28px;">

<span><input id="chkAll" type="checkbox" />全选</span>

<span><input id="btnDel" type="button" value="删除" /></span>

</td></tr>

</table>

<img id="imgTip" class="clsImg" src="psu (1).jpg" />

</body>

2.jquery代码

$(function(){

//隔行变色

$("table tr:nth-child(odd)").css("background-color","#9FF"); 

//全选框单击事件

$("#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);

}

}) 

//删除按钮点击事件

$("#btnDel").click(function(){

//获取除了全选框外的所有选中项

var len=$("table tr td input:checked:not('#chkAll')").length;

//如果有选中项

if(len!=0){

//遍历除了全选框外的行

$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {

            //如果被选中了，根据每行的checkbox的值来删除该行，this.value就是遍历到改行的checkbox的值，同时也是改行tr的id的值，根据id进行删除行

           if(this.checked){

$("table tr[id="+this.value+"]").remove();

}

            });

}

})

//图片预览功能--->小图片移动事件

var x=5; var y=15;

$("table tr td img").mouseover(function(e){

//设置图片和显示图片：

//原理：给之前隐藏的图片设置css属性，将当前鼠标停留的图片赋予src的值，再设置位置与小图片的相对位置

$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(500);

})

//鼠标移除后

$("table tr td img").mouseout(function(){

$("#imgTip").hide();

})

})

</script>

3. 后续使用修改说明

    （一）如果页面的html有多个table，那就加上指定table的id，写法是：$("#table_id,table tr:nth-child(odd)")，这样就实现了指定哪一个table的操作

    （二）批量删除table的tr，同时又将数据库的记录删掉，就直接在$("table tr[id="+this.value+"]").remove();下面直接调用jquery的$.post或者$.get方法传给处理删除的文件即可

分享到：
| hibernate使用配置小结-手动、自动两种.
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics