如何使用JavaScript添加一个复杂的表格行？

5 浏览
0 Comments

如何使用JavaScript添加一个复杂的表格行？

我有一张有三列的表格，其中两个单元格包含带有10-20个值列表的选择框。就像这样：\n| 用户 | 经理 | 部门 |\n| 罗布 | [约翰·史密斯| V] | [销售| V] |\n| 瑞 | [鲍勃·琼斯| V] | [支持| V] |\n页面是一个JSP页面，所以我使用for循环来构建选择框的内容。所有“经理”和所有“部门”的列表都包含相同的项目。\n我还有一个“添加新行”的链接。我知道如何使用JavaScript向表格添加新行，就像这样：\nvar table = document.getElementById（“myTable”）;\nvar rowCount = table.rows.length;\nvar row = table.insertRow（rowCount）;\n我知道如何在新行中添加正确的“html”，就像这样：\nvar cell0 = row.insertCell（0）;\nvar element0 = document.createElement（“span”）;\nelement0.innerHTML =\'你好\';\ncell0.appendChild（element0）;\n...等等。\n我的问题是，我的表格行有很多HTML（因为每个选择框中可能有很多值）。\n如何解决这个问题？我应该如何添加新行？\n非常感谢任何建议！\n谢谢，罗布\n更新：\n我意识到我可以编写一个“addNewRow”servlet，接受表单上的所有数据，将其转换为Java列表，添加新项目，然后将带有新值的表格重定向回我的页面。这可能很容易。\n唯一的问题是每次“添加新”点击时，网页会重新加载。

0

3 答案

0 Comments

问题的原因是想要用JavaScript添加一个复杂的表格行，并且希望通过整理HTML来清除选项的混乱。解决方法是将选项分离到一个JavaScript数组中。可以使用JavaScript来完成这个操作，但如果使用了像KnockoutJS、AngularJS或Ember这样的JavaScript库，那么可以非常容易地实现。而且这些库还可以帮助解决其他关注点分离的问题。这些库中的大多数都附带了模板解决方案，这对于创建表格时会非常有帮助。

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

建议查看整个Knockout网站，文档非常优秀。希望对您有所帮助。

0
0 Comments

问题的出现原因：用户需要以JavaScript添加一个复杂的表格行，但不知道如何实现。

解决方法：可以考虑使用模板引擎来解决这个问题，例如Mustache.js。它允许将HTML代码写在一个单独的文件中，并通过将一个对象传递给模板引擎来循环渲染所有的表格行。

可以创建一个模板，比如下面这样（仅作示例）：

{{#person}}

    
{{jobTitle}}

    {{name}} - {{age}}

{{/person}}

将一个包含多个`person`对象的对象字面量传递给模板引擎，每个`person`对象都有`jobTitle`、`name`和`age`属性，模板引擎将自动进行渲染。

0
0 Comments

问题的原因是用户想要在JavaScript中添加一个复杂的表格行，但不知道如何实现。解决方法是通过克隆现有的行并编辑所需的项目。

代码示例：

// Clone the table row
var newRow = oldRow.cloneNode(true);
// Edit the items in the cloned row
newRow.querySelector('.item1').innerHTML = 'New Item 1';
newRow.querySelector('.item2').innerHTML = 'New Item 2';
// Append the cloned and edited row to the table
table.appendChild(newRow);

通过克隆现有的行，然后使用querySelector找到要编辑的项目，可以添加一个复杂的表格行。最后，将克隆和编辑后的行附加到表格中。

用户通过在Google中搜索了如何在JavaScript中克隆表格行，并在搜索结果中找到了一个相关的Stack Overflow链接。这个链接提供了关于如何克隆和附加表格行的信息。

通过这个解决方法，用户可以在JavaScript中添加一个复杂的表格行。

0