表格的编辑,删除,新增操作

功能:1、实现鼠标双击时,可编辑表格的内容;

             2、可新增行;

             3、可删除行;

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Manager Page</title>
    <script type="text/javascript" src="public/lib/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        table.stats
        {
            text-align: center;
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 13px;
            color: #fff;
            width: 800px;
            background-color: #666;
            border: 0px;
            border-collapse: collapse;
            border-spacing: 0px;
        }
        table.stats td
        {
            background-color: #CCC;
            color: #000;
            padding: 4px;
            text-align: left;
            border: 1px #fff solid;
            width: 150px;
        }
        table.stats tr td:first-child {
            width:40px;
        }
        table.stats td input {
            width: 140px;
        }
        table.stats td input[type="checkbox"] {
            width: 40px;
        }
    </style>
</head>
<body>
    <table border="1" id="editable" class="stats">
        <thead>
            <tr>
                <th>choose</th>
                <th>id</th>
                <th>parent</th>
                <th>text</th>
                <th>action</th>
                <th>url</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <input type="button" value="新增" class="add-button"></input>
    <input type="button" value="删除" class="delete-button"></input>
    <input type="button" value="确定" class="confirm-button"></input>
    <script type="text/javascript">
        $(function(){
            $("table").on('dblclick', 'td', function(){
                console.log("dbclick");
                if ($(this).find('input[type="checkbox"]').length != 0) {
                    return;
                }
                var td = $(this);
                var text = td.text();
                td.text("");
                td.append("<input type='text'>");
                var input = td.find('input')
                input.val(text);
                input.focus();
                input.blur(function(){
                    var newText = $(this).val();
                    $(this).remove();
                    td.text(newText);
                });
            });
            $(".add-button").on('click', function(){
                var tableSize = $('thead tr th').size();
                console.log("size: " + tableSize);
                var tablebody = $('tbody');
                tablebody.append('<tr class="append-line"></tr>');
                var appendLine = $('.append-line');
                appendLine.append('<td><input type="checkbox"></input></td>')
                for (var index = 0; index < tableSize - 1; ++index) {
                    appendLine.append('<td></td>');
                }
                appendLine.removeClass('append-line');
            });
            $(".delete-button").on('click', function(){
                $("tbody").find(":checkbox:checked").each(function(){
                    $(this).parent().parent().remove();
                })
            });
            $("confirm-button").on('click', function(){

            })
        });
        (function InitTable(){
            console.log("123");
            var data=[[0, 0, "123", "456", "html"], [1, 1, "123", "456", "html"]];
            var tablebody = $('tbody');
            for (var index in data) {
                console.log("data", data[index]);
                tablebody.append('<tr class="append-line"></tr>');
                var appendLine = $('.append-line');
                appendLine.append('<td><input type="checkbox"></input></td>')
                for (var dataIndex in data[index]) {
                    console.log(data[index][dataIndex]);
                    appendLine.append('<td>' + data[index][dataIndex] + '</td>');
                }
                appendLine.removeClass('append-line');
            }
            AppendLine();
        })();
        function AppendLine(){
            var tableLastLineFirstCell = $('tbody tr:last td:first').text();
            console.log(tableLastLineFirstCell);
        };
    </script>
</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值