0

我有一个包含三列的表格，两个单元格包含选择框，其中包含 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，它接受表单上的所有数据，将其转换为 Java 列表，添加新项目，然后使用表中的新值重定向回我的页面。那可能很容易。

唯一的问题是网页会在每次“添加新”点击时重新加载。

4

3 回答 3

0

你可以考虑一个模板解决方案——我是Mustache.js的忠实粉丝。它允许您在一个单独的文件中编写 HTML，并将对象文字传递给模板引擎，模板引擎将为您呈现所有表格行。

你可以有一个这样的模板（只是弥补）：

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

将对象的对象字面量传递给它person，每个对象都有一个jobTitle,name和age属性，它会为你做剩下的事情。

于 2012-06-18T19:30:40.773 回答
0

您可以克隆现有行之一并简单地编辑您需要的项目

于 2012-06-18T19:35:02.130 回答
0

听起来问题不仅在于创建行，还在于您想要清理 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);
});

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

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

希望有帮助。

于 2012-06-18T19:58:44.137 回答