js点击表格变成输入框

基础概念

在JavaScript中，点击表格单元格（<td>）并将其转换为输入框（<input>）是一种常见的交互模式，用于允许用户直接编辑表格内容。这种功能通常通过事件监听和DOM操作来实现。

类型

单单元格编辑：每次只允许编辑一个单元格。
多单元格编辑：允许同时编辑多个单元格。

应用场景

数据管理界面：如CRM系统、库存管理系统等。
表单填写：在线表格工具或电子表格应用。
动态内容编辑：需要实时更新内容的网站。

示例代码

以下是一个简单的示例，展示了如何实现点击表格单元格变成输入框的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editable Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="editableTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
        </tr>
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('editableTable');
            table.addEventListener('click', function(event) {
                const target = event.target;
                if (target.tagName === 'TD') {
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.value = target.textContent;
                    target.textContent = '';
                    target.appendChild(input);
                    input.focus();

                    input.addEventListener('blur', function() {
                        target.textContent = input.value;
                    });

                    input.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            input.blur();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>