Question

我正在尝试添加，并希望删除一次添加作品，当用户单击一个按钮然后输入到mysql数据库时，某些维度字段到表单，但我不知道要显示任何内容。

使用Javascript：

    var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

HTML：

        <div id="readroot" style="display: none">
        <p>Quantity<input type="text" name="iQuantity" size="3">
Weight(kg)<input type="text" name="iWeight"size="4">    Length(cm)<input type="text" name="iLength"size="4"> *  Width(cm)<input type="text" name="iWidth"size="4"> * Height(cm)<input type="text" name="iHeight"size="4"></div>
    <span id="writeroot"></span>

    <input type="button" value="Add another text input" onClick="moreFields();">

非常感谢任何帮助，谢谢

Answer 1

用于创建元素的JavaScript有效。您可以改进附加事件的方式。以下是我将如何更新您的JavaScript代码：

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';

    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name;
        if (theName) newField[i].name = theName + counter;
    }

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

if (window.addEventListener) {
    window.addEventListener('load', moreFields, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', moreFields);
}

var el = document.getElementById('clicker')

if (el.addEventListener) {
    el.addEventListener("click", moreFields, false);
} else {
    el.attachEvent('onclick', moreFields);
}

您的HTML可以得到很多改进。在这里，我关闭了你的标签，它现在正在运作。

<div id="readroot" style="display:none;">
    <p>Quantity
        <input type="text" name="iQuantity" size="3" />Weight(kg)
        <input type="text" name="iWeight" size="4" />Length(cm)
        <input type="text" name="iLength" size="4" />* Width(cm)
        <input type="text" name="iWidth" size="4" />* Height(cm)
        <input type="text" name="iHeight" size="4" />
    </p>
</div>
<div id="writeroot"></div>
<input id="clicker" type="button" value="Add another text input" />

动态添加/删除表单域

1 个答案: