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

淡淡的烟草味﹌ 2022-07-28 01:27 165阅读 0赞

功能：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>