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

最新推荐文章于 2021-10-16 23:07:54 发布

期待一片自己的蓝天

最新推荐文章于 2021-10-16 23:07:54 发布

阅读量1.3k

点赞数

分类专栏： web前端文章标签： table 双击编辑删除

本文链接：https://blog.csdn.net/nyist327/article/details/51000803

版权

web前端专栏收录该内容

13 篇文章 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>