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方法传给处理删除的文件即可
分享到：
相关推荐
以上就是使用jQuery实现“商品隔行变色”的基本步骤和相关知识点。这个功能不仅可以用于商品列表，还可以应用于其他任何需要隔行变色的场景，如论坛帖子、表格数据等。理解并掌握这一技巧，有助于提升网页的交互性和...
jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大...
在网页开发中，为了提升用户体验，我们经常需要对表格数据进行视觉优化，其中一种常见的方法是实现隔行变色的效果。这个技术可以帮助用户更轻松地分辨表格中的每一行数据，提高阅读的舒适度。本教程将详细介绍如何...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
"jQuery实现的图片放大预览"是一种常见且实用的技术，它能够提升用户对网站中图片的互动性，使他们能更直观地查看图片细节。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化网页动态交互的实现。本知识...
本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> &...
jquery实现隔行换色效果
本文将深入探讨如何使用jQuery来实现隔行换色，并分享相关的技巧和注意事项。 首先，我们需要理解基本的HTML结构，通常包含一个`<table>`元素，里面嵌套着`<tr>`（表格行）和`<td>`（表格单元格）元素。隔行换色的...
"jQuery 图片放大预览"是一种常见的交互功能，它允许用户在不离开当前页面的情况下，通过点击或悬停在图片上实现图片的放大预览，增强查看细节的能力。这种技术在电商网站、产品展示页面等场合非常常见，能够提高...
本教程将深入讲解如何使用jQuery实现图片预览功能。 首先，我们需要了解基本的HTML结构。在`index.html`文件中，你需要创建一个`<input>`元素用于让用户选择图片，以及一个`<div>`元素作为预览区域： ```html <!...
本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading Style Sheets）来实现，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的...
在前端开发过程中，使用jQuery来实现隔行变色效果是一种常见的需求，能够帮助改善用户界面的可读性，使得表格、列表等元素的展示更加人性化。本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例...
总结来说，这个项目是一个基础的 Webpack 使用示例，展示了如何配置 Webpack 以及使用 jQuery 实现隔行变色效果。通过学习这个项目，你可以更好地理解 Webpack 的工作原理，以及如何利用它来管理和构建前端项目。
"图片放大预览插件 jquery图片放大镜特效插件"就是专为此目的设计的工具，它利用jQuery库提供了一种高效、易用的解决方案，使得用户在不离开页面的情况下可以查看图像的细节。 jQuery是一款轻量级的JavaScript库，...
zoomify.js是一款非常实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。
本文将深入探讨如何使用jQuery实现隔行变色，并与原生JavaScript进行对比。 首先，我们来看原生JavaScript实现隔行变色的方法。通过`document.getElementsByTagName`方法，我们可以获取到页面上的所有表格元素...
在本教程中，我们将深入探讨如何使用jQuery实现表格的隔行换色效果，这是一项常见的网页美化技术，可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化DOM操作，让...
"使用jQuery实现的点击图片放大"是一种常见的交互设计，它能够提升用户对图片细节的查看体验。jQuery是一个轻量级、功能强大的JavaScript库，使得开发者能够更方便地处理DOM操作、事件处理、动画效果以及Ajax交互。...
4. 计算放大图片相对于容器的位置和大小，使放大图片覆盖原始图片位置。 5. 为放大图片添加点击事件，当再次点击放大图片时，将其隐藏。 为了美化效果，可以添加一些 CSS 样式，例如： ```css .image-container { ...