javascript - 如何在 JavaScript 中实现 "add new item"功能？

Question

标题不是很详细，但我找不到更好的。随意编辑它。

基本上我正在寻找的是执行以下操作的最佳方法:

当用户单击“添加新项目”时，将添加一个新行，其中包含一个相同的文本框并下拉，如上所示。我能想到的选项如下:

• 在 JavaScript 代码中对 HTML 进行硬编码。这显然是一个极其丑陋的解决方案。
• 从 DOM 节点(或 jQuery 对象)组装 HTML。这也太丑了。
• 使用客户端模板系统。我曾经使用过其中一个，它非常奇怪(它使用 <script language="html"> 标签来定义模板)。
• 制作一个特别的客户端"template"并用 CSS 以某种方式隐藏它。
• 发出 AJAX 请求以获取 HTML。这很慢并且不必要地使用服务器资源。

你有什么建议？我对上述任何解决方案都不完全满意。

Answer 1

假设采用 super 简单的方法并且您的格式在表格中:

<table>
    <tr>
        <td><input type="text" name="item_name" placeholder="item name" /></td>
        <td><select name="item_type"><option value="" selected="selected">Type</option></select></td>
    </tr>
    <tr>
        <td><input type="text" name="item_name" placeholder="item name" /></td>
        <td><select name="item_type"><option value="" selected="selected">Type</option></select></td>
    </tr>
    <tr>
        <td colspan="2" id="add">+ Add new item</td>
    </tr>
</table>

您可以使用以下内容:

$('#add').on('click',function(e){
    var $this = $(this);
    var $newRow = $this.closest('table').find('tr:first').clone();
    $newRow.find(':input').val('');
    $newRow.insertBefore($this.parent());
});

分割:

1. 我们为最后一项提供一个 ID，以便更轻松地将点击事件绑定(bind)到。
2. 使用 jQuery 并将点击事件绑定(bind)到该 ID，该 ID:
   • 抓取我们正在点击的当前表格 ($this.closest('table'))
   • 找到该表中的第一行并复制它 (.clone())
   • 删除可能存在的任何填充值 (.find(':input').val(''))
   • 将这个新的克隆行附加到表中“添加新项目”行的正上方 ($newRow.insertBefore(...))

您也可以采用模板方法，但这完全取决于您以及您希望对输出进行多少控制。