2

我希望能够添加新部分（通过“添加”链接）并删除它们（通过“x”按钮），如图所示。

截屏

图片的 HTML：

<fieldset>
   <legend>Legend</legend>

        <div id="section0">
            <input type="text" name="text1" value="Text1" />
            <input type="text" name="text2" value="Text2" size='40' />
            <input type="button" value="x" style="width: 26px" /><br />
        </div>

     <a href="#">add</a><br />

</fieldset>

我想我可以根据需要添加新的部分（即section1、section2）并根据按下的按钮删除这些部分。每次单击“添加”链接时，都会有一个 JavaScript 函数在 DOM 中注入部分，而每次单击“x”按钮时，另一个函数会删除一个部分。

由于我在 HTML 和 Javascript 方面的经验很少，我不知道这是一个好/坏的解决方案。所以，我的问题正是：这是正确的方法还是有更简单/更好的方法？谢谢。

PS：随意用一些示例代码回答

4

3 回答 3

1

几分钟前，我刚刚在这里使用 jQuery 回答了一个几乎相同的问题：https ://stackoverflow.com/a/10038635/816620 ，如果你想看看它是如何在那里工作的。

如果你想要纯 javascript，可以这样做。

HTML：

<div id="section0">
    <input type="text" name="text1" value="Text1" />
    <input type="text" name="text2" value="Text2" size='40' />
    <input type="button" value="x" style="width: 26px" /><br />
</div>

<a href="#" onclick="addSection(this)">add</a><br />

Javascript：

function addSection(where) {
    var main = document.getElementById("section0");
    var cntr = (main.datacntr || 0) + 1;
    main.datacntr = cntr;

    var clone = main.cloneNode(true);
    clone.id = "section" + cntr;
    where.parentNode.insertBefore(clone, where);    
}​

工作演示：http: //jsfiddle.net/jfriend00/TaNFz/

于 2012-04-06T03:39:09.963 回答
1

这是一种方法：

<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}

function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>

<body onload="newrow()">
<fieldset>
    <legend>Legend</legend>
    <table>
        <tbody id="customTable">
        </tbody>
    </table>
<button onclick="newrow()">Add</button> 
</fieldset>
</body>

如果需要，您可以向它们添加 ID，或者您可以通过它们的位置来调用它们document.getElementsByTagName("input")[x].value输入将从 0 开始，所以左边是 0，右边是 1，添加行：左边是 2，右边是 3，等等。

如果您删除一个，则序列不会混乱（每次都会重新评估），这比硬编码的 ID 更好。

于 2012-04-06T03:39:16.013 回答
1

http://pastebin.com/QBMEJ2pq是一个稍长但稳健的答案。

于 2012-04-06T03:50:45.263 回答