JSP 動態增減表格行：原生 JavaScript 實現無依賴

需求

點擊「增加」按鈕動態添加一行包含輸入框的表格行，每行帶「刪除」按鈕移除自身。

純 JS 實現（無 jQuery/EasyUI 依賴）

<table id="dataTable" border="1">
    <thead><tr><th>項目</th><th>數量</th><th>操作</th></tr></thead>
    <tbody></tbody>
</table>
<button onclick="addRow()">增加</button>

<script>
function addRow() {
    var tbody = document.querySelector('#dataTable tbody');
    var tr = document.createElement('tr');

    var td1 = document.createElement('td');
    td1.innerHTML = '<input type="text" name="item" />';
    var td2 = document.createElement('td');
    td2.innerHTML = '<input type="number" name="qty" />';
    var td3 = document.createElement('td');
    td3.innerHTML = '<button onclick="deleteRow(this)">刪除</button>';

    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tbody.appendChild(tr);
}

function deleteRow(btn) {
    var tr = btn.closest('tr'); // 現代瀏覽器支持
    tr.parentNode.removeChild(tr);
}
</script>

進階：獲取所有行數據提交

function collectData() {
    var rows = document.querySelectorAll('#dataTable tbody tr');
    var data = [];
    rows.forEach(function(tr) {
        var item = tr.querySelector('[name="item"]').value;
        var qty = tr.querySelector('[name="qty"]').value;
        data.push({item: item, qty: qty});
    });
    return JSON.stringify(data);
}

優勢

• 零依賴，頁面加載快。
• 易於理解 DOM 操作本質，適合教學/輕量頁面。
• 若專案已引入 jQuery，可用 `$(tbody).append(html)` 簡化代碼。