\u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528 \u7eaf HTML + CSS + \u5c11\u91cf JavaScript \u5b9e\u73b0\u7684\u53ef\u7f16\u8f91\u8868\u683c\u793a\u4f8b\uff0c\u652f\u6301\uff1a<\/p>\n\n\n\n
html<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n <meta charset="UTF-8" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1.0"\/>\n <title>\u53ef\u7f16\u8f91 HTML \u8868\u683c<\/title>\n <style>\n body {\n font-family: Arial, Helvetica, sans-serif;\n margin: 40px;\n background: #f5f5f5;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n border-radius: 8px;\n overflow: hidden;\n }\n\n th, td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n }\n\n th {\n background-color: #4a90e2;\n color: white;\n font-weight: bold;\n }\n\n tr:hover {\n background-color: #f8f9fa;\n }\n\n td.editable {\n cursor: pointer;\n position: relative;\n }\n\n td.editable:hover {\n background-color: #e3f2fd;\n }\n\n \/* \u7f16\u8f91\u72b6\u6001\u4e0b\u7684\u8f93\u5165\u6846 *\/\n td.editing input {\n width: 100%;\n padding: 6px 8px;\n border: 2px solid #4a90e2;\n border-radius: 4px;\n outline: none;\n font-size: 1em;\n }\n\n \/* \u64cd\u4f5c\u6309\u94ae *\/\n .actions {\n text-align: center;\n }\n\n button {\n padding: 6px 12px;\n margin: 0 4px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9em;\n }\n\n .btn-add {\n background: #28a745;\n color: white;\n }\n\n .btn-delete {\n background: #dc3545;\n color: white;\n }\n\n .btn-save {\n background: #17a2b8;\n color: white;\n }\n <\/style>\n<\/head>\n<body>\n <div class="container">\n <h2>\u53ef\u7f16\u8f91\u8868\u683c\u793a\u4f8b<\/h2>\n\n <button class="btn-add" onclick="addRow()">+ \u6dfb\u52a0\u4e00\u884c<\/button>\n\n <table id="editableTable">\n <thead>\n <tr>\n <th>\u59d3\u540d<\/th>\n <th>\u5e74\u9f84<\/th>\n <th>\u57ce\u5e02<\/th>\n <th>\u64cd\u4f5c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td class="editable" data-field="name">\u5f20\u4e09<\/td>\n <td class="editable" data-field="age">28<\/td>\n <td class="editable" data-field="city">\u5317\u4eac<\/td>\n <td class="actions">\n <button class="btn-delete" onclick="deleteRow(this)">\u5220\u9664<\/button>\n <\/td>\n <\/tr>\n <tr>\n <td class="editable" data-field="name">\u674e\u56db<\/td>\n <td class="editable" data-field="age">34<\/td>\n <td class="editable" data-field="city">\u4e0a\u6d77<\/td>\n <td class="actions">\n <button class="btn-delete" onclick="deleteRow(this)">\u5220\u9664<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n <script>\n \/\/ \u70b9\u51fb\u5355\u5143\u683c\u8fdb\u5165\u7f16\u8f91\u6a21\u5f0f\n document.querySelectorAll('.editable').forEach(cell => {\n cell.addEventListener('click', function() {\n if (this.classList.contains('editing')) return;\n\n const originalValue = this.textContent.trim();\n const input = document.createElement('input');\n input.type = 'text';\n input.value = originalValue;\n\n \/\/ \u6e05\u7a7a\u5e76\u653e\u5165 input\n this.textContent = '';\n this.appendChild(input);\n this.classList.add('editing');\n\n \/\/ \u81ea\u52a8\u805a\u7126\n input.focus();\n\n \/\/ Enter \u4fdd\u5b58\uff0cEsc \u53d6\u6d88\n input.addEventListener('keydown', function(e) {\n if (e.key === 'Enter') {\n saveEdit(cell, input.value);\n } else if (e.key === 'Escape') {\n cancelEdit(cell, originalValue);\n }\n });\n\n \/\/ \u5931\u53bb\u7126\u70b9\u4e5f\u4fdd\u5b58\n input.addEventListener('blur', () => {\n saveEdit(cell, input.value);\n });\n });\n });\n\n \/\/ \u4fdd\u5b58\u7f16\u8f91\n function saveEdit(cell, newValue) {\n cell.textContent = newValue.trim() || '\u2014';\n cell.classList.remove('editing');\n }\n\n \/\/ \u53d6\u6d88\u7f16\u8f91\n function cancelEdit(cell, originalValue) {\n cell.textContent = originalValue;\n cell.classList.remove('editing');\n }\n\n \/\/ \u6dfb\u52a0\u65b0\u884c\n function addRow() {\n const table = document.getElementById('editableTable').getElementsByTagName('tbody')[0];\n const newRow = table.insertRow();\n\n \/\/ \u521b\u5efa\u53ef\u7f16\u8f91\u5355\u5143\u683c\n ['name', 'age', 'city'].forEach(field => {\n const cell = newRow.insertCell();\n cell.className = 'editable';\n cell.dataset.field = field;\n cell.textContent = '\u70b9\u51fb\u7f16\u8f91';\n \/\/ \u91cd\u65b0\u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n cell.addEventListener('click', function() {\n \/\/ \u590d\u7528\u4e0a\u9762\u7684\u70b9\u51fb\u903b\u8f91\uff08\u53ef\u63d0\u53d6\u4e3a\u51fd\u6570\u66f4\u4f18\u96c5\uff09\n if (this.classList.contains('editing')) return;\n const originalValue = this.textContent.trim();\n const input = document.createElement('input');\n input.value = originalValue;\n this.textContent = '';\n this.appendChild(input);\n this.classList.add('editing');\n input.focus();\n\n input.addEventListener('keydown', e => {\n if (e.key === 'Enter') saveEdit(this, input.value);\n if (e.key === 'Escape') cancelEdit(this, originalValue);\n });\n input.addEventListener('blur', () => saveEdit(this, input.value));\n });\n });\n\n \/\/ \u64cd\u4f5c\u5217\n const actionCell = newRow.insertCell();\n actionCell.className = 'actions';\n actionCell.innerHTML = `<button class="btn-delete" onclick="deleteRow(this)">\u5220\u9664<\/button>`;\n }\n\n \/\/ \u5220\u9664\u884c\n function deleteRow(btn) {\n if (confirm('\u786e\u5b9a\u5220\u9664\u6b64\u884c\uff1f')) {\n const row = btn.closest('tr');\n row.remove();\n }\n }\n <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\u4e3b\u8981\u7279\u70b9\u8bf4\u660e\uff1a<\/p>\n\n\n\n
\u8fdb\u9636\u5efa\u8bae\uff08\u6839\u636e\u9700\u6c42\u53ef\u6269\u5c55\uff09\uff1a<\/p>\n\n\n\n
\u9700\u8981\u66f4\u590d\u6742\u7684\u529f\u80fd\uff08\u5982\u6392\u5e8f\u3001\u8fc7\u6ee4\u3001\u5206\u9875\u3001\u5bfc\u51fa Excel \u7b49\uff09\u4e5f\u53ef\u4ee5\u544a\u8bc9\u6211\uff0c\u6211\u518d\u5e2e\u4f60\u6269\u5c55\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"