鹽城網站建設 -> 信息中心 -> 網絡編程 -> JavaScript

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

日期:2019-04-30 19:14:42 閱讀:76次 【 字體:

<!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小時客服熱線

0515-87213010

18036323215

海南飞鱼游戏技巧