JQuery操作table中checkbox全选删除，图片放大浏览效果。

最新推荐文章于 2024-04-25 11:38:14 发布

wjv20110308

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量3k

点赞数

文章标签： jquery table function border input button

本文链接：https://blog.csdn.net/wjv20110308/article/details/7349924

版权

<!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>
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <style type="text/css">
        #d1
        {
            position: inherit;
            width: 300px;
            border: 1px solid #CCC;
            float: left;
        }
        #t1
        {
            width: 300px;
            border: 1px solid #CCC;
            float: left;
        }
        td
        {
            border: 1px solid #C1DAD7;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#Checkbox4").click(function () {
                if ($(this).is(":checked")) {
                    //alert("ok");
                    //全选
                    $("#t1 :checkbox").attr("checked", "checked");
                }
                else {
                    //alert("no");
                    //全不选
                    $("#t1 :checkbox").removeAttr("checked");
                }
            })
            //删除
            $("#Button1").click(function () {
                //找到table #t1中包含checkbox元素且checkbox为选择状态的tr，然后删除之。 
                $("#t1 tr:has(:checkbox[checked])").remove();
            })
            //鼠标移动到图片上显示大图。
            $("#t1 img").hover(function () {
                //alert($(this).attr("src"))
                var x = window.event.x; //获取鼠标位置
                var y = window.event.y;
                //alert(x + "  " + y)
                var str = "";
                var style = "'border: 4px solid #EA0000;position:absolute; margin-top:" + y + "px; margin-left:" + x + "px;display:none'"; //设置大图片样式
                str = "<div id='i1' style= " + style + "><img src='" + $(this).attr("src") + "'width=600px height=420px /></div>"; //设置大图片元素
                $("body").append(str); //添加大图片元素
                $("#i1").show(1000);
            },
            function () {
                $("#i1").remove(); //鼠标移出则删除大图元素
            })
        })
    </script>
</head>
<body>
    <div id="d1">
        <table id="t1">
            <tr style="height: 20px;">
                <td>
                </td>
                <td>
                    ID
                </td>
                <td>
                    姓名
                </td>
                <td>
                    图片
                </td>
                <td>
                    年龄
                </td>
            </tr>
            <tr style="height: 110px;">
                <td>
                    <input id="Checkbox1" type="checkbox" />
                </td>
                <td>
                    101
                </td>
                <td>
                    土星
                </td>
                <td>
                    <img src="images/11.jpg" width="120px" height="100px" />
                </td>
                <td>
                    100亿
                </td>
            </tr>
            <tr style="height: 110px;">
                <td>
                    <input id="Checkbox2" type="checkbox" />
                </td>
                <td>
                    102
                </td>
                <td>
                    地球
                </td>
                <td>
                    <img src="images/12.jpg" width="120px" height="100px" />
                </td>
                <td>
                    67亿
                </td>
            </tr>
            <tr style="height: 110px;">
                <td>
                    <input id="Checkbox3" type="checkbox" />
                </td>
                <td>
                    103
                </td>
                <td>
                    太阳
                </td>
                <td>
                    <img src="images/13.jpg" width="120px" height="100px" />
                </td>
                <td>
                    1000亿
                </td>
            </tr>
        </table>
            <div id="d2">
        全选：<input id="Checkbox4" type="checkbox" />
        <input id="Button1" type="button" value="删除" /></div>
    </div>

</body>
</html>