• html5 contenteditable 实现table可编辑(网页版EXCEL)


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

    其实自己实现类似功能也不难。参考:https://blog.csdn.net/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>
  • 相关阅读:
    VS 2012 + NDK + ADT 开发(Cocos2d-x 3.1开发)PART 2
    VS 2012 + NDK + ADT 开发(Cocos2d-x 3.1开发)PART 1
    WebView读取SD卡上的HTML
    安卓隐藏控件
    OMNET++安装
    产品质量的核心——概念的完整性
    关于异常
    基类与子类之间的引用转换
    成绩划分 处理异常
    《大道至简 第七、八章》读后感
  • 原文地址:https://www.cnblogs.com/pu369/p/10370027.html
Copyright © 2020-2023  润新知