그림의 미리 보기, 전체 선택, 삭제 (jquery)

<%@ 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>

좋은 웹페이지 즐겨찾기