更新

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的批次（因为每个选择框中可能有很多值）。

解决这个问题的好方法是什么？我该如何添加新行？

非常感谢任何建议！

谢谢，Rob

更新

我发现我可以编写一个“addNewRow”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，以便选择选项不会让所有内容变得混乱 - 如果我理解正确的话。

您是否尝试将选项分成JavaScript数组？

您可以单独使用JavaScript，但如果您使用提供数据绑定的JavaScript库（如KnockoutJS，AngularJS或Ember），那么您可以非常轻松地执行此操作。此外，它还可以帮助您解决其他问题。

其中大多数还带有模板化解决方案 - 这在创建表格时肯定会有所帮助。

Knockout有一个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);
});

如果您对Knockout感兴趣 - 这是他们网站上的另一个示例，它向您展示如何使用行和选择框执行更复杂的操作：http://knockoutjs.com/examples/cartEditor.html

可能值得检查整个网站 - 文档非常好。

希望有所帮助。

如何使用javascript添加复杂的表行？

更新

3 个答案: