Question

标题不是很具描述性，但我找不到更好的标题。随意编辑它。

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

add new item

当用户点击“添加新项目”时，会添加一个带有缩进文本框的新行，并按上述方式下拉。我能想到的选项如下：

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

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

Answer 1

如果您已在页面上使用jquery或sencha等框架，那么您也可以使用它。

否则，我会尽量保持简单。这看起来不是一个非常重要的核心功能，所以不要创建需要额外的https请求甚至整个库加载的东西。克隆或生成html可能看起来不太优雅，但它将是：

快速实施
易于阅读，因此易于调试
浪费少量资源，而且速度极快
稳定
不需要服务器端代码或额外的http请求
如果需要，稍后可以轻松更改实施

不要创造像过程一样过分的东西。

Answer 2

假设超简单的方法，并且您的格式在表中：

<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());
});

细分：

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

您也可以采用模板方法，但这取决于您以及您对输出的控制程度。

Answer 3

虽然我意识到你已经接受了答案，但我认为我会提供一种简单的JavaScript方法来实现同样的目标：

function closest(el, tag) {
    if (!el || !tag) {
        return false;
    }
    else {
        var curTag = el.tagName.toLowerCase();
        return curTag == tag.toLowerCase() && curTag !== 'body' ? el : closest(el.parentNode, tag);
    }
}

function addRow(el) {
    if (!el) {
        return false;
    }
    else {
        var tr = closest(el, 'tr').previousElementSibling,
            newRow = tr.cloneNode(true);
        tr.parentNode.insertBefore(newRow, tr.nextSibling);
    }
}

document.getElementById('add').onclick = function() {
    addRow(this);
}

JS Fiddle demo

修改上述内容，添加一个简单的垫片来处理那些没有实现previousElementSibling的浏览器：

function closest(el, tag) {
    if (!el || !tag) {
        return false;
    }
    else {
        var curTag = el.tagName.toLowerCase();
        return curTag == tag.toLowerCase() && curTag !== 'body' ? el : closest(el.parentNode, tag);
    }
}

function prevElementSiblingShim(el) {
    if (!el) {
        return false;
    }
    else {
        var prevSibling = el.previousSibling;
        return prevSibling.nodeType == 1 ? prevSibling : prevElementSiblingShim(prevSibling);
    }
}

function addRow(el) {
    if (!el) {
        return false;
    }
    else {
        var par = closest(el, 'tr'),
            tr = par.previousElementSibling || prevElementSiblingShim(par),
            newRow = tr.cloneNode(true);
        tr.parentNode.insertBefore(newRow, tr.nextSibling);
    }
}

document.getElementById('add').onclick = function() {
    addRow(this);
}

参考文献：

cloneNode()。
insertBefore。
nextSibling。
nodeType。
parentNode。
previousElementSibling ^{Compatibility}。
previousSibling。
tagName。
toLowerCase()。

Answer 4

将字符串中的HTML插入DOM是最有效的方法。除非你一次插入数百个，否则它并不重要。

如何在JavaScript中实现“添加新项”功能？

4 个答案: