盐城网站建设 -> 信息中心 -> 网络编程 -> JavaScript

append(在后面添加)和prepend(在最前面添加)

日期:2019-04-30 19:14:42 阅读:62次 【 字体:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>append(在后面添加)和prepend(在最前面添加)的区别</title>
    </head>
<script src='js/jquery-1.11.3.min.js'></script>
    <style>
        table {width: 100%;border: 1px solid #ccc;text-align: center;}
        table td,table th {width: 25%;border: 1px solid #ccc;}
        table td input[type='button'] {width: 40%;cursor: pointer;}
        table td input[type='text'] {background-color: #fff;text-align: center;}
        .aft,.bef {width: 20%;height: 25px;cursor: pointer;}
    </style>
    <script>
        $(function () {
        //在末尾添加一行
            $('.aft').click(function () {
                var tr1 = $(".clonTab").find("tr").eq(0).clone();
                $('tbody').append(tr1);
            });
        //在最前面添加一行
            $('.bef').click(function () {
                var tr2 = $(".clonTab").find("tr").eq(0).clone();
                $('tbody').prepend(tr2);
            });
        //删除
            $('body').on('click','.dele',function () {
                $(this).parent().parent().remove('tr');
            })
        //修改
            var count = 1;
            $('body').on('click','.revi',function(){
                var text = $(this).parent();
                var textTd1 = text.siblings("td:eq(1)");
                var textTd2 = text.siblings("td:eq(2)");
                if(count == 1 && (text.siblings("td:eq(1)").children("input").length == 0)){
                    count += 1;
                    var a = textTd1.text();
                    var b = textTd2.text();
                    text.siblings("td").text("");
                    textTd1.append("<input type='text' value='" + a + "'>");
                    textTd2.append("<input type='text' value='" + b + "'>");
                    $(this).val("保存");
                }else if((count == 2) || (count ==1 && (text.siblings("td:eq(1)").children("input").length == 1))){
                    count = 1;
                    var c = textTd1.children("input").val();
                    var d = textTd2.children("input").val();
                    text.siblings("td").children().remove();
                    textTd1.text(c);
                    textTd2.text(d);
                    $(this).val("修改");
                }
            });
        //全选
            $('.selectAll').click(function(){
                var item1 = $('tbody').find('tr').find('td:eq(0)');
                item1.attr("checkbox","true");
            })
        });
        function checkAll(me) {
            var chk = $(me).prop("checked");
            var chkName = $(me).val();
            if (chk == true) {
                $(me).prop("checked", "checked");
                $(me).parent().parent().parent().siblings('tbody').find('tr').find("input[name='chk_1']").prop("checked", "checked");
            }else{
                $(me).prop("checked", "");
                $(me).parent().parent().parent().siblings('tbody').find('tr').find("input[name='chk_1']").prop("checked", "");
            }
        }
    </script>
</head>
<body>
    <input type="button" value="在后面添加">
    <input type="button" value="在前面添加">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" onclick="checkAll(this)">全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="chk_1"></td>
                <td>张三</td>
                <td>男</td>
                <td>
                    <input type="button" value="删除">
                    <input type="button" value="修改">
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chk_1"></td>
                <td>李四</td>
                <td>女</td>
                <td>
                    <input type="button" value="删除">
                    <input type="button" value="修改">
                </td>
            </tr>
        </tbody>
    </table>
    <table style="display: none;">
        <tr>
            <td><input type="checkbox" name="chk_1"></td>
            <td>
                <input type="text" placeholder="请输入姓名" value="">
            </td>
            <td>
                <input type="text" placeholder="请输入性别" value="">
            </td>
            <td>
                <input type="button" value="删除">
                <input type="button" value="保存">
            </td>
        </tr>
    </table>
</body>
<html>




上一篇:没有了
下一篇:微信公众号页面自动关闭方法 微信..
最新文章
会员 客服 QQ 电话 充值 工单
Top

24小时客服?#35748;?/h3>

0515-87213010

18036323215

多特vs奥格斯堡
欢乐麻将全集下载手机 宝龙休闲会怎么样 足球比分90vs滚球 五星国际娱乐棋牌 重庆时时彩新一代计划 时时龙虎和 彩神计划免费 飞艇的技巧跟算法分享 时时彩每天赚100 牛牛娱乐棋牌 极速6合精准计划软件 捕鱼达人二有卡牌的 怎样判断时时彩开单双 斗地主单机版不用网络 新秀瞬间传媒娱乐公司 重庆时时彩骗局