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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM