html5 contenteditable 实现table可编辑（网页版EXCEL）

最新推荐文章于 2024-03-25 14:52:45 发布

weixin_30381793

最新推荐文章于 2024-03-25 14:52:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/pu369/p/10370027.html

本文介绍了一个基于HTML和JavaScript的在线多人编辑表格的方法，通过在本地创建HTML文件并使用jQuery库，实现了对表格中姓名字段的在线编辑功能。

一直想找一个免费的网页版的EXCEL插件，以便于多人共同在线编辑，始终没发现合适的。

其实自己实现类似功能也不难。参考：https://blog.youkuaiyun.com/chadcao/article/details/52014730

直接将以下代码存在本地目录中，如A.html，双击在浏览器中打开，即可对姓名字段进行编辑。

<!doctype html>
<html>
<head>
    <title>table contenteditable</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var students = [
            { 'no': 'S001', 'name': '张三', 'address': '浙江' },
            { 'no': 'S002', 'name': '李四', 'address': '江苏' },
            { 'no': 'S003', 'name': '王五', 'address': '福建' },
            { 'no': 'S004', 'name': '马六', 'address': '四川' }
        ];
        $(function () {
            InitStudents();
        });
        function InitStudents() {
            var html = '';
            $.each(students, function (i, item) {
                html += '<tr>';
                html += '<td>' + item.no + '</td>';
                html += '<td><span contenteditable="true" class="studentname">' + item.name + '</span></td>';
                html += '<td>' + item.address + '</td>';
                html += '</tr>';
            });
            $('#mainTbody').append(html);
        }
        function GetStudents() {
            var studentnames = '';
            $('#mainTbody span.studentname').each(function () {
                studentnames += '【' + $(this).text() + '】';
            });
            alert(studentnames);
        }
    </script>
</head>
<body>
    <div><input type="button" value="确定" onclick="GetStudents();" /></div>
    <div style="margin-top:10px;">
        <table>
            <thead>
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>地址</td>
                </tr>
            </thead>
            <tbody id="mainTbody"></tbody>
        </table>
    </div>
</body>
</html>