如何使用JavaScript添加復雜的表格行？

Question

我有一個包含三列的表，兩個單元格包含帶有10-20個值的列表的選擇框。 像這樣：

| USER    | MANAGER            | DEPARTMENT   |

| Rob     | [John Smith |V]    | [Sales |V]   | 

| Sue     | [Bob Jones |V]     | [Support |V] |

該頁面是一個JSP，因此我正在使用for循環構建選擇框內容。 所有“經理”和所有“部門”列表都包含相同的項目。

我也有“添加新行”鏈接。 我知道如何使用Javascript向表中添加新行，如下所示：

var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

而且我知道如何在新行中添加正確的“ html”，如下所示：

var cell0 = row.insertCell(0);
var element0 = document.createElement("span");
element0.innerHTML = 'Hello';
cell0.appendChild(element0);

... 等等。

我的問題是我的表行有很多 HTML（因為每個選擇框中可能有很多值）。

解決這個問題的好方法是什么？ 我應該如何添加新行？

任何建議，不勝感激！

謝謝，羅伯

更新

在我看來，我可以編寫一個“ addNewRow” servlet，該servlet接受表單上的所有數據，將其轉換為Java列表，添加新項，然后使用表中的新值重定向回我的頁面。 那可能很容易。

唯一的問題是，每次“添加新”點擊時，網頁都會重新加載。

Answer 1

您可以考慮使用模板解決方案-我是Mustache.js的忠實擁護者 。 它允許您在一個單獨的文件中編寫HTML，並將對象文字傳遞給模板引擎，該引擎將為您呈現循環中的所有表行。

您可以有一個像這樣的模板（只需組成它）：

{{#person}}
<td>
    <h2 class="jobTitle">{{jobTitle}}</h2>
    <span>{{name}}</span> - {{age}}
</td>
{{/person}}

向其傳遞person對象的對象文字，每個對象都有一個jobTitle ， name和age屬性，它將為您完成其余工作。

Answer 2

您可以克隆現有行之一，只需編輯所需的項目即可

Answer 3

聽起來問題不僅僅在於創建行，還在於您想清理html，以便select選項不會弄亂所有內容-如果我理解正確的話。

您是否嘗試過將選項分成JavaScript數組？

您可以單獨使用JavaScript來執行此操作，但是如果您使用的是提供數據綁定的JavaScript庫（例如KnockoutJS，AngularJS或Ember），則可以輕松實現。 另外，它將幫助您解決其他關注點分離問題。

它們中的大多數還帶有模板解決方案-這在創建表時肯定會有所幫助。

敲除具有foreach綁定，可用於生成具有以下內容的行：

<tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>

這是一個示例的鏈接： http : //knockoutjs.com/documentation/foreach-binding.html

如果您以前沒有嘗試過，我在JSFiddle中制作了一個使用KnockoutJS綁定選擇框的超級簡單示例： http : //jsfiddle.net/phillipkregg/eQF3e/

以防萬一這些值存儲在服務器上，您可以將其下拉並通過JQuery ajax調用將它們存儲到一個數組中，如下所示：

$.getJSON('/my_items', function(data) {
   viewModel.items(data);
});

如果您對淘汰賽感興趣-這是他們網站上的另一個示例，向您展示如何使用行和選擇框執行更復雜的操作： http : //knockoutjs.com/examples/cartEditor.html

可能值得檢查整個站點-文檔非常好。

希望能有所幫助。