[jQuery]數據刪除和圖片預覽

時間 2019-11-07

原文原文鏈接

摘自：《jQuery權威指南》

1.在頁面建立一個表格展現數據，各行變色
2.選中某行點擊「刪除」按鈕能夠刪除該行，選中「全選」後點擊「刪除」按鈕則刪除所有數據
3.鼠標移到某行的小圖片上，實現圖片預覽效果javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>j_1_4.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    
    <style type="text/css">
        body {
            font-size: 12px;
        }
        
        table {
            width: 360px;
            border-collapse: collapse;
        }
        
        table tr th,td {
            border: solid 1px #666;
            text-align: center;
        }
        
        table tr td img {
            border: solid 1px #ccc;
            padding: 3px;
            width: 42px;
            height: 60px;
            cursor: hand;
        }
        
        table tr td span {
            float: left;
            padding-left: 12px;
        }
        
        table tr th {
            background-color: #ccc;
            height: 32px;
        }
        
        .clsImg {
            position: absolute;
            border: solid 1px #ccc;
            padding: 3px;
            width: 150px;
            height: 200px;
            background-color: #eee;
            display: none;
        }
        
        .btn {
            border: solid 1px #666;
            padding: 2px;
            width: 50px;
            filter: progid:DXImageTransform.Microsoft
            .Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);
        }
    </style>
    <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]").attr("checked", true);
                } else {
                    $("table tr td input[type=checkbox]").attr("checked", false);
                }
            });
            
            $("#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).css({"top":(e.pageY + y) + "px",
                "left":(e.pageX + x) + "px"}).show(300);
            });
            
            $("table tr td img").mouseout(function(){
                $("#imgTip").hide();
            });
        });
    </script>
  </head>
        
  <body>
    <center>
        <table>
            <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/1.jpg"></td>
                <td>李小明</td>
                <td>男</td>
                <td>69.00元</td>
            </tr>
            <tr id="1">
                <td><input id="Checkbox2" type="checkbox" value="1" /></td>
                <td>1002</td>
                <td><img src="Images/2.jpg"></td>
                <td>劉明明</td>
                <td>女</td>
                <td>108.00元</td>
            </tr>
            <tr id="2">
                <td><input id="Checkbox3" type="checkbox" value="2" /></td>
                <td>1003</td>
                <td><img src="Images/3.jpg"></td>
                <td>劉芳芳</td>
                <td>女</td>
                <td>89.00元</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="刪除" class="btn"/></span>
                </td>
            </tr>
        </table>
        <img id="imgTip" class="clsImg" src="Images/a5.gif">
    </center>
  </body>
</html>