html table+css实现可编辑表格

xingdiango

于 2023-12-21 12:27:31 发布

阅读量2.7k

点赞数 20

文章标签： html css 前端

本文链接：https://blog.csdn.net/xingdiango/article/details/135127831

版权

本文介绍了如何使用JavaScript和HTML5的contenteditable属性创建可编辑的HTML表格，包括添加`contenteditable=true`属性以实现单元格的交互式编辑，并通过事件侦听器处理用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <table id="editableTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td contenteditable="true">John Doe</td>
                <td contenteditable="true">25</td>
                <td contenteditable="true">Male</td>
            </tr>
            <tr>
                <td contenteditable="true">Jane Smith</td>
                <td contenteditable="true">30</td>
                <td contenteditable="true">Female</td>
            </tr>
            <!-- 添加更多行 -->
        </tbody>
    </table>

    <script>
        // 获取可编辑表格
        var table = document.getElementById('editableTable');
        
        // 遍历表格，为每个单元格添加事件侦听器
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++) {
                table.rows[i].cells[j].addEventListener('input', function () {
                    // 处理输入事件，可以在此处进行逻辑处理或保存数据
                    console.log(this.textContent);
                });
            }
        }
    </script>
</body>
</html>

在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true" 属性的单元格可以被鼠标点击并接受用户输入。

JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。

点击表格前：