使用純 JavaScript 實現動態表格的增刪改功能教程
引言
在現代Web 應用開發中，動態表格操作是常見的需求，例如管理用戶列表、商品庫存等。本教程將指導您如何僅使用JavaScript 來實現對錶格行的添加、編輯和刪除功能，無需依賴任何後端語言（如PHP）。我們將從一個基本的HTML 結構開始，逐步完善各項功能，並特別關注編輯功能的實現細節，解決在將靜態文本轉換為可編輯輸入框時可能遇到的問題。
1. 初始HTML 結構概述
為了演示動態表格操作，我們首先需要一個基本的HTML 表格結構。本例中，我們將使用JavaScript 動態生成表格，但實際項目中，表格通常會預先定義在HTML 中，或通過AJAX 從服務器加載數據。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態表格增刪改</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
margin-right: 5px;
padding: 5px 10px;
cursor: pointer;
}
.save {
display: none; /* 初始時隱藏保存按鈕*/
}
input[type="text"] {
width: 90%;
padding: 4px;
box-sizing: border-box;
}
</style>
<h1>動態表格數據管理</h1>
<div id="table-container"></div>
<script>
// JavaScript 代碼將在這裡插入</script>
在<script> 標籤內部，我們將動態生成表格。這里為了簡化示例，我們直接使用document.write。在實際生產環境中，推薦使用document.createElement 和appendChild 等DOM 操作方法，以避免覆蓋頁面內容。</script>
// 初始表格及數據（使用document.write 簡化演示）
document.addEventListener('DOMContentLoaded', function() {
let tableHTML = `
| ID | 姓名 | 地址 | 年齡 | 操作 |
| 1 | Anu | Colombo | 20 | |
注意：上述代碼將表格內容插入到table-container div 中，而不是直接使用document.write 覆蓋整個文檔，這是一種更推薦的做法。
2. 核心JavaScript 功能實現
我們將實現addrow (添加), deleterow (刪除), editrow (編輯) 和saverow (保存) 四個核心功能。
2.1 添加行(addrow)
addrow 函數負責獲取輸入框中的新數據，創建一個新的表格行，並將其插入到表格中。
function addrow(){
var new_id = document.getElementById("new_id").value;
var new_name = document.getElementById("new_name").value;
var new_address = document.getElementById("new_address").value;
var new_age = document.getElementById("new_age").value;
if (!new_id || !new_name || !new_address || !new_age) {
alert("所有字段都不能為空！");
return;
}
var mytable = document.getElementById("TABLE");
// 獲取當前表格的行數，用於生成新的行ID
// 注意：這裡的t_length 應該考慮表頭和添加行本身var t_length = mytable.rows.length - 1; // 減去“添加新行”的行，確保ID遞增// 創建新的行HTML字符串var newRowHTML = `
<tr id="'row${t_length}'">
<td id="'id_row${t_length}'">${new_id}</td>
<td id="'name_row${t_length}'">${new_name}</td>
<td id="'address_row${t_length}'">${new_address}</td>
<td id="'age_row${t_length}'">${new_age}</td>
<td>
<button id="'edit_button${t_length}'" class="'edit'" onclick="'editrow("${t_length}")'">編輯</button>
<button id="'save_button${t_length}'" class="'save'" onclick="'saverow("${t_length}")'">保存</button>
<button class="'delete'" onclick="'deleterow(this)'">刪除</button>
</td>
</tr>`;
// 將新行插入到“添加新行”之前var addRowElement = document.getElementById('add_new_row');
addRowElement.insertAdjacentHTML('beforebegin', newRowHTML);
// 清空輸入框document.getElementById("new_id").value = "";
document.getElementById("new_name").value = "";
document.getElementById("new_address").value = "";
document.getElementById("new_age").value = "";
}
2.2 刪除行(deleterow)
deleterow 函數通過事件對象獲取被點擊按鈕的父元素（
function deleterow(buttonElement) {
var td = buttonElement.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
}
注意：原始代碼中的deleterow() 沒有傳遞參數，依賴全局event 對象。為了更好的可維護性和兼容性，我們修改為傳遞按鈕元素本身，然後通過parentNode 屬性向上查找。
2.3 編輯行(editrow)
editrow 函數是本教程的重點，它負責將表格單元格的靜態文本內容轉換為可編輯的 字段。
問題分析：原始代碼中，雖然創建了包含 標籤的HTML 字符串，但並沒有將其賦值給對應的單元格的innerHTML，導致頁面上沒有實際的視覺變化。
解決方案：在創建完input 元素的HTML 字符串後，必須將其賦值給對應的
function editrow(x){
// 1. 切換編輯和保存按鈕的顯示狀態document.getElementById("edit_button" x).style.display="none";
document.getElementById("save_button" x).style.display="inline-block"; // 使用inline-block 以保持按鈕在同一行// 2. 獲取當前行的所有單元格元素var idCell = document.getElementById("id_row" x);
var nameCell = document.getElementById("name_row" x);
var addressCell = document.getElementById("address_row" x);
var ageCell = document.getElementById("age_row" x);
// 3. 獲取當前單元格的文本內容var id_data = idCell.innerHTML;
var name_data = nameCell.innerHTML;
var address_data = addressCell.innerHTML;
var age_data = ageCell.innerHTML;
// 4. 將文本內容轉換為包含輸入框的HTML字符串// 注意：這里為每個輸入框設置了唯一的ID，方便後續saverow函數獲取值var id_input_html = "<input type="'text'" id="'id_text"" x value="'"" id_data>";
var name_input_html = "<input type="'text'" id="'name_text"" x value="'"" name_data>";
var address_input_html = "<input type="'text'" id="'address_text"" x value="'"" address_data>";
var age_input_html = "<input type="'text'" id="'age_text"" x value="'"" age_data>";
// 5. 將生成的輸入框HTML字符串賦值給對應的單元格的innerHTML
// 這是修復原始代碼中缺少的核心步驟！
idCell.innerHTML = id_input_html;
nameCell.innerHTML = name_input_html;
addressCell.innerHTML = address_input_html;
ageCell.innerHTML = age_input_html;
}
2.4 保存行(saverow)
saverow 函數負責在用戶完成編輯後，從輸入框中獲取新值，更新表格單元格的文本內容，並將輸入框變回靜態文本。
function saverow(y){
// 1. 從輸入框中獲取新值var id_val = document.getElementById("id_text" y).value;
var name_val = document.getElementById("name_text" y).value;
var address_val = document.getElementById("address_text" y).value;
var age_val = document.getElementById("age_text" y).value;
// 2. 更新對應單元格的innerHTML 為新值document.getElementById("id_row" y).innerHTML = id_val;
document.getElementById("name_row" y).innerHTML = name_val;
document.getElementById("address_row" y).innerHTML = address_val;
document.getElementById("age_row" y).innerHTML = age_val;
// 3. 切換編輯和保存按鈕的顯示狀態document.getElementById("edit_button" y).style.display = "inline-block";
document.getElementById("save_button" y).style.display = "none";
}
3. 完整示例代碼
將上述所有JavaScript 函數整合到HTML 文件的<script> 標籤中，即可得到一個完整的、可運行的動態表格增刪改示例。</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態表格增刪改</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table {
width: 80%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
margin-right: 5px;
padding: 5px 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #e0e0e0;
}
button:hover {
background-color: #d0d0d0;
}
.save {
display: none; /* 初始時隱藏保存按鈕*/
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
.save:hover {
background-color: #45a049;
}
.delete {
background-color: #f44336;
color: white;
border-color: #f44336;
}
.delete:hover {
background-color: #da190b;
}
input[type="text"] {
width: calc(100% - 10px); /* 減去padding和border */
padding: 4px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 3px;
}
#add_new_row td input {
width: calc(100% - 10px);
}
</style>
<h1>動態表格數據管理</h1>
<div id="table-container"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let tableHTML = `
<table id='TABLE' border='1' width='500'>
<tr>
<th>ID
<th>姓名
<th>地址
<th>年齡
<th>操作
</script>
以上是使用純 JavaScript 實現動態表格的增刪改功能教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Stock Market GPT
人工智慧支援投資研究，做出更明智的決策
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
CSS技巧：精確隱藏特定文本內容而不影響父元素
Sep 16, 2025 pm 10:54 PM
本教程詳細介紹瞭如何使用CSS精確隱藏HTML頁面中的特定文本內容，避免因不當選擇器導致整個父元素被隱藏的問題。通過為目標文本的包裹元素添加專屬CSS類，並利用display: none;屬性，開發者可以實現對頁面元素的精細化控制，確保只隱藏所需部分，從而優化頁面佈局和用戶體驗。
捕獲含跨域iframe的父元素mousedown事件：原理與限制
Sep 20, 2025 pm 11:00 PM
本文探討了在包含跨域iframe的父div上捕獲mousedown事件的挑戰。核心問題在於瀏覽器安全策略（同源策略）阻止了對跨域iframe內容的直接DOM事件監聽。除非控制iframe源域名並配置CORS，否則無法實現此類事件捕獲。文章將詳細解釋這些安全機制及其對事件交互的限制，並提供可能的替代方案。
Bootstrap Flexbox佈局中實現元素垂直堆疊：從並排到分層
Sep 21, 2025 pm 10:42 PM
在使用Bootstrap進行網頁佈局時，開發者常遇到元素默認並排顯示而非垂直堆疊的問題，尤其當父容器應用了Flexbox佈局時。本文將深入探討這一常見佈局挑戰，並提供解決方案：通過調整Flex容器的flex-direction屬性為column，利用Bootstrap的flex-column工具類，實現H1標籤與表單等內容塊的正確垂直排列，確保頁面結構符合預期。
如何在HTML中製作圖像周圍的文本包裹？
Sep 21, 2025 am 04:02 AM
usecssfloatpropertytowraptextaroundanimage：floatleftfortextextontheright，floatrightfortextontheleft，addmarginforspacing，and clearFloatFloatStopReventLayOutissues。
JavaScript外部函數調用疑難解析：腳本位置與命名規範
Sep 20, 2025 pm 10:09 PM
本文探討了在HTML中調用外部JavaScript函數時常見的兩個問題：腳本加載時機不當導致DOM元素未就緒，以及函數命名可能與瀏覽器內置事件或關鍵字衝突。文章提供了詳細的解決方案，包括調整腳本引用位置和遵循良好的函數命名規範，以確保JavaScript代碼能夠正確執行。
如何在HTML中創建與電子郵件地址的超鏈接？
Sep 16, 2025 am 02:24 AM
usemailto：inhreftCreateeMaillinks.startwithforbasiclinks，add？ object = and＆body = forpre-flycontent，andIncludeMultipleDresseSorcc =，bcc = foradvancedOptions。
如何在html中設置lang屬性
Sep 21, 2025 am 02:34 AM
setThelangattributeInthehtmltagtagtagtospecifepageLanguage，例如forenglish; 2.使用“ es” es“ es” forspanishor“ fr” forfrench; 3. IncludereVariantswariantswariantswithCountryCountryCodeslike“ en-us” en-us“ en-us”或“ zh-cn”;
如何在HTML中添加懸停的工具提示？
Sep 18, 2025 am 01:16 AM
UsethetitleattributeforsimpletooltipsorCSSforcustom-styledones.1.Addtitle="text"toanyelementfordefaulttooltips.2.Forstyledtooltips,wraptheelementinacontainer,use.tooltipand.tooltiptextclasseswithCSSpositioning,pseudo-elements,andvisibilityc
