我有一個表有三列，並且兩個單元包含選擇框10-20值的列表。這樣的事情：如何用javascript添加複雜的表格行？

| 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（因爲每個選擇框中可能有很多值）。

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

任何建議，非常感謝！

謝謝，羅布

UPDATE

它發生，我認爲我可以寫一個「addNewRow」的servlet接受窗體上的所有數據，把它變成了Java列表中，增加了新的項目，然後使用表中的新值重定向到我的頁面。這可能很容易。

唯一的問題是網頁將重新載入每一個「添加新的」點擊。

來源

2012-06-18 Robert Hume

隨着你的servlet的想法，你可以做的工作超過ajax – Hailwood

你可以複製現有的行之一，簡單的編輯，你需要

來源

2012-06-18 19:35:02 Hailwood

Ooo ...聽起來很酷。任何關於如何在Javascript中克隆行的指針？我現在要谷歌，但如果你有任何鏈接或樣本狙擊手，讓我知道。 –

發現這個：http://stackoverflow.com/questions/1728284/create-clone-of-table-row-and-append-to-table-in-javascript-不知道這是我想怎麼走呢。但一個不錯的領先！ –

你可以考慮一個模板解決方案 - 我的Mustache.js忠實粉絲。它允許你在一個單獨的文件中編寫你的HTML，並將一個對象文字傳遞給模板引擎，該模板引擎將爲你呈現所有的表格行。

你可以有一個模板，像這樣（只是把它）：

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

傳遞一個對象常量person對象，每一個jobTitle，name和age屬性，它會做休息爲你。

來源

2012-06-18 19:30:40

這聽起來像問題不僅創建行項目，但要清理HTML，以便選擇選項不要把所有東西都弄糊塗 - 如果我理解正確的話。

你試過分離選項加入到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

這可能是值得檢查整個網站 - 文件非常好。

希望有所幫助。

來源

2012-06-18 19:58:44 PhillipKregg

如何用javascript添加複雜的表格行？

UPDATE

回答

相關問題