html5 contenteditable 实现table可编辑

最新推荐文章于 2024-06-24 09:43:22 发布

曹振华

最新推荐文章于 2024-06-24 09:43:22 发布

阅读量7.8k

点赞数

分类专栏： html5 文章标签： html5 contenteditable table 可编辑

本文链接：https://blog.csdn.net/chadcao/article/details/52014730

版权

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <title>table contenteditable</title>
    <script type="text/javascript" src="javascript/jquery.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="确定" οnclick="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>