图片的预览、全选、删除(jquery)

最新推荐文章于 2024-04-14 17:03:53 发布
最新推荐文章于 2024-04-14 17:03:53 发布
阅读量6.7k 收藏
点赞数
文章标签： jquery function input table border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjingtao/article/details/7350594
版权 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 40%;
            
            text-align:center;
            
        }
        img{ width:100px; height:90px;}
         #imgshow{ position:absolute; border:solid 1px #eee; width:250px; height:350px; display:none;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#chk_all').click(function () {
                $('table :checkbox').attr('checked', this.checked);
            })
            $('#del').click(function () {
                var ck = $('#form1 :checkbox:not(#chk_all)');
                ck.each(function (index) {
                    if (this.checked) {
                        $(' table tr[id=' + this.value + ']').remove();
                    }
                })
            })

            $('img').mousemove(function (e) {
                $('#imgshow').attr('src', this.src).css({ top: (e.pageY + 5), left: (e.pageX + 5) }).show();
            })

            $('img').mouseout(function () {
                $('#imgshow').hide();
            })

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="style1" border="1" ; >
            <tr >
                <td>
                    操作</td>
                <td>
                    编号</td>
                <td>
                    封面</td>
                <td>
                    作者</td>
                <td>
                    数量</td>
                <td>
                    单价</td>
            </tr>
            <tr id="0">
                <td>
                    <input  type="checkbox"  value="0"/></td>
                <td>
                    0001</td>
                <td>
                    <img src="images/1.jpg" /></td>
                <td>
                    刘昕</td>
                <td>
                    45</td>
                <td>
                    32</td>
            </tr>
            <tr id="1">
                <td>
                    <input  type="checkbox"  value="1"/></td>
                <td>
                    0002</td>
                <td>
                    <img src="images/2.jpg" /> </td>
                <td>
                    妙妙</td>
                <td>
                    50</td>
                <td>
                    40</td>
            </tr>
            <tr id="2">
                <td>
                    <input  type="checkbox"  value="2"/></td>
                <td>
                    0003</td>
                <td>
                    <img src="images/3.jpg" /></td>
                <td>
                    王欣</td>
                <td>
                    65</td>
                <td>
                    26</td>
            </tr>
        </table>
    <table>
   <tr><td>全选<input type="checkbox" id="chk_all" /></td><td><input type="button" value="删除"  id="del"/></td></tr>
   </table>
   <img class="imgclass" id="imgshow" />
    </div>
    </form>
</body>
</html>

hjingtao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery全选
07-28
利用jQuery全选实现一个简单的全选功能
基于jquery实现点击左右按钮图片横向滚动
12-10
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面： 效果图如下： 代码如下: <!DOCTYPE html> <html lange=”en”> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8″ /> <style type=”text/css”> * { margin:0; padding:0;} body { font-size:12px;} .box {height:66px; float:left; width:440px; overflow: hidden; position:rela
jQuery图片列表全选反选代码
07-24
jQuery图片列表全选反选代码是一款手机端我的收藏页图片列表全选反选取消删除功能。
可预览移除图片的jQuery多张图片批量上传插件代码
11-20
可预览移除图片的jQuery多张图片批量上传插件代码 可预览移除图片的jQuery多张图片批量上传插件代码
利用jquery移除和添加图片
游海东的技术专栏
08-25 6710
利用jquery移除和添加图片 1、样式     .changeImage{          background:url(images/right.png) no-repeat center;     } 2、JS （1）在改变标签的样式，需要移除之前添加的样式 $("#tab tr").find("td").removeClass("changeImag
HTML+JQuery 图片列表选中图片并打勾
04-11
jQuery选中图片打勾投票代码基于jquery-1.9.1.js制作，简单实用，投票图片中显示姓名、票数。
使用Jq 实现复选框批量选中效果
...
07-30 938
实现步骤：首先，先获取到当前复选框的元素，但点击click 时触发（注意，在jq中的事件是没有带on）；然后，获取当前的复选框状态；最后，根据其状态设置相同的状态属性。 $('#selall').click(function(){ //获取当前复选框的状态 var chk = $(this).attr('checked'); if(chk){ $('.selal
VUE 中 通过v-bind:src 图片不显示问题
qq_44855431的博客
09-05 2718
VUE 中 通过v-bind:src 图片不显示问题，引入图片的方式用require 即可 html: <img src="../../assets/images/ColdRain/u5865.png" /> js: imgUrl:require( './../../assets/188.jpg'),
Jquery上传多张图片和删除图片
qq_43404873的博客
12-19 2261
最近需要使用到多张图片上传功能，正好写篇博客记录一下； 废话不多说，直接看效果。 html代码 <!DOCTYPE html> <html lang="en"> <link> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签</title> <link rel
jQuery带删除功能多图片上传预览插件
12-08
jQuery带删除功能多图片上传预览插件，支持个浏览器。。。。。。。。。。。。。
jquery多图片上传 可加可删除
05-28
jquery多图片上传 可加可删除，解决h5在安卓里面不能图片多选问题。
jquery实现多次上传同一张图片
11-26
话不多说，请看代码 $('input[type=file]').wrap('<form>').closest('form').get(0).reset(); wrap():$(‘p’).wrap(‘div’);===><div><p></p></div>; .closest():最接近的列表元素或者其子后代元素 get():$(‘p’).get(0)获得第一个p元素的名称和值，这个方法得到的是dom元素，后面如果你再加jQuery方法的话就会报错
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jQuery+php简单实现全选删除的方法
10-21
主要介绍了jQuery+php简单实现全选删除的方法,涉及php结合jQuery操作表单的全选及ajax交互实现删除的相关技巧,需要的朋友可以参考下
HTML5新增特性
m0_48670609的博客
04-14 977
HTML5新增语义化标签，新增音频视频标签，新增表单标签和属性
大学生创新创业训练计划经验分享.zip
04-25
大学生创新创业训练计划（以下简称为“大创计划”）是一项旨在提升大学生创新能力和创业精神的实践活动。通过这项计划，学生可以在导师的指导下，自主开展研究性学习和创业实践。下面我将分享一些关于大创计划的经验和建议。
node-v12.22.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
毕业设计-The coding solutions of Leetcode and 剑指Offer using .zip
04-25
这里为你收集整理了关于毕业设计、课程设计可参考借鉴的资料一份，质量非常高，如果你投入时间去研究几天相信肯定对你有很大的帮助。到时候你会回来感谢我的。 本资源是经过本地编译测试、可打开、可运行的项目、文件或源码，可以用于毕业设计、课程设计的应用、参考和学习需求，请放心下载。 祝愿你在这个毕业设计项目中取得巨大进步，顺利毕业！ 但还需强调一下，这些项目源码仅供学习和研究之用。在使用这些资源时，请务必遵守学术诚信原则和相关法律法规，不得将其用于任何商业目的或侵犯他人权益的行为。对于任何因使用本资源而导致的问题，包括但不限于数据丢失、系统崩溃或安全漏洞，风险自担哦！
jquery全选删除
11-23
以下是一个基于jQuery的全选删除的例子： HTML代码： ```html 全选 选项1 选项2 选项3 删除 ``` jQuery代码： ```javascript // 全选和全不选的操作 $("#all").change(function(){ // 得到all的状态,将其设置给...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值