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

<!DOCTYPE html>
<html lang="en">
<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" class="aft" value="在后面添加">
    <input type="button" class="bef" value="在前面添加">
    <table>
        <thead>
            <tr>
                <th class="selectAll"><input type="checkbox" οnclick="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" class="dele" value="删除">
                    <input type="button" class="revi" value="修改">
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chk_1"></td>
                <td>李四</td>
                <td>女</td>
                <td>
                    <input type="button" class="dele" value="删除">
                    <input type="button" class="revi" value="修改">
                </td>
            </tr>
        </tbody>
    </table>

    <table class="clonTab" 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" class="dele" value="删除">
                <input type="button" class="revi" value="保存">
            </td>
        </tr>
    </table>
</body>
<html>
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值