html table+css實現(xiàn)可編輯表格的示例代碼

發(fā)布時間：2024-03-06 16:26:50 作者：xingdiango

本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

要實現(xiàn)可編輯的 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 () {
                    // 處理輸入事件，可以在此處進行邏輯處理或保存數(shù)據(jù)
                    console.log(this.textContent);
                });
            }
        }
    </script>
</body>
</html>

在上述示例中，使用了 contenteditable 屬性來使表格單元格可編輯。添加 contenteditable="true" 屬性的單元格可以被鼠標(biāo)點擊并接受用戶輸入。

JavaScript 部分遍歷表格的所有單元格，并為每個單元格添加輸入事件偵聽器。在輸入事件處理程序中，你可以根據(jù)需要處理用戶的輸入，比如更新數(shù)據(jù)或觸發(fā)其他操作。

點擊表格前：