0

我尝试建立一个注册表单。该注册表单为文本框，名为“address1”，在其附近有一个名为“Add Address”的按钮。按钮的功能 - 它为更多地址添加文本框。前一个地址框附近的按钮更改为“删除”，即删除地址框和按钮。问题是：我必须按顺序设置文本框 - 1,2,3,... - 我必须更改它们的名称和 ID。例如 - 如果我删除地址框编号 4 (name, id="address4") 那么所有下一个文本框的名称和 id 应该减少 1。我尝试在 for 循环中执行此操作。这很难解释，所以我只给你代码。尝试在您的 VS 中编写例如 'document.getElementById("address"+n).' 你会发现你甚至没有 在你得到的列表中看不到你可以写在点 id 或名称或值之后。我意识到这是因为有一个变量，这是我认为的问题。现在这里是代码：

<html>
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var n1 = 1; //counting the buttons and divs. doesn't decrease. 
                    //In another words - it counts the number of calls to Add()
        var n3 = 1; //counting the address text fields. 
                    //It being reduced and increased so that it will represent the exact number of text fields
        function Add() {
            n1++;
            n3++;
                s1 = "<div id='div" + n1 + "'>";
                s1 += "Address <input type='text' name='address" + n3 + "' id='address" + n3 + "' />";
                s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add();' /><br />";
                s1 += "</div>";
                var n2 = n1 - 1;
                document.getElementById('div' + n2).insertAdjacentHTML('afterEnd', s1);
                document.getElementById('add' + n2).onclick = function () { Remove(n2, (n3-1)); };
                document.getElementById('add' + n2).value = 'Remove';
        }
        function Remove(nn1, nn2) { //nn1 - div number to remove. nn2 - the address field number in this div
            var parent = document.getElementById('barcode');
            var child = document.getElementById('div' + nn1);
            parent.removeChild(child);
            for (nn2 += 1; nn2 <= n3; nn2++) {
                var n2 = nn2 - 1; //nn2 - current address text field. n2 - the new number for the address field
                document.getElementById('address' + nn2).setAttribute('name', 'address' + n2);
                document.getElementById('address' + nn2).setAttribute('id', 'address' + n2);
                document.getElementById('address' + n2).setAttribute('value', 'address' + n2);
                // try: document.getElementById('address' + nn2).name='address'+n2. doesn't work (for me)
            }
            n3--;
        }
        var check = false;
    </script>
</head>
<body>
    <form name='barcode' id='barcode' action="" >
        <div id='div1'>
        Address <input type='text' name='address1' id='address1' />
        <input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
        </div></form>
</body>
</html>

对不起，我在这段代码中只保留了与地址字段相关的内容，并添加了注释。非常感谢！

编辑：我忘记了您在此代码中看不到错误，因为我已经尝试修复它。在我更改代码之前，它对所有 div、文本字段和添加/删除按钮进行了排序，因此所有现有项目将始终按顺序编号（1、2、3、...）。如果您单击 2 次添加按钮，然后删除第一个地址字段，然后再次单击添加按钮，则可以看到以下代码中的问题。

<html>
<head>
    <script type="text/javascript">
        var n1 = 1;
        function Add() {
                n1++;
                s1 = "<div id='div" + n1 + "'>";
                s1 += "Address <input type='text' name='address" + n1 + "' id='address" + n1 + "' />";
                s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add()' /><br />";
                s1 += "</div>";
                var n2 = n1 - 1;
                document.getElementById('div' + (n2)).insertAdjacentHTML('afterEnd', s1);
                document.getElementById('add' + (n2)).onclick = function () { Remove(n2); };
                document.getElementById('add' + (n2)).value = 'Remove';
        }
        function Remove(n) {
            var parent = document.getElementById('barcode');
            var child = document.getElementById('div' + n);
            parent.removeChild(child);
            for (n += 1; n <= n1; n++) {
                var n2 = n1 - 1;
                document.getElementById('add' + n).onclick = function () { Remove(n2); };
                document.getElementById('address' + n).setAttribute('name', 'address' + n2);
                document.getElementById('add' + n).setAttribute('name', 'add' + n2);
                document.getElementById('address' + n).setAttribute('id', 'address' + n2);
                document.getElementById('add' + n).setAttribute('id', 'add' + n2);
                document.getElementById('div' + n).setAttribute('id','div' + n2);
            }
            n1--;
            document.getElementById('add' + n1).onclick = function () { Add() };
        }
    </script>
</head>
<body>
    <form name='barcode' id='barcode' action="" >
            <div id='div1'>
            Address <input type='text' name='address1' id='address1' />
            <input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
            </div>
       </form>
</body>
</html>
4

1 回答 1

2

我认为您在维护地址顺序方面工作有点太努力了，我没有看到这样做的一般理由（如果您有，请将其添加到您的问题中）。

如果您像正在做的那样添加具有唯一索引的输入，它们将始终不同且有序。

以下是您可以执行的操作：

将事件调用者传递给 Add 和 Remove 函数，您可以在其中对这些元素进行所需的更改。

例如，您的Remove函数（您将使用 调用Remove(this);）将如下所示：

function Remove(callerButton) { 
    var parent = document.getElementById('barcode');

    var child = callerButton.parentNode;
    // child is the DIV you want to remove
    parent.removeChild(child);
    n3--;
}

这样你就不需要做你现在正在做的所有排序。

最后，您可以使用以下命令访问所有剩余元素：

var addresses = document.getElementById("barcode").getElementsByTagName("input");

for(var i = 0; i < addresses.length; i++) {
    if(addresses[i].type == "text") {
        // I'm printing them in the console, you can do with it whatever you like
        // If you want to exclude the one with "Add Branch in front of it you can validate for address+n1
        console.log("Element.id : " + addresses[i].id + " - Element.value: "+ addresses[i].value );
    }
}

我添加了一个带有这些更改的jsFiddle（添加了一个提交按钮以显示表单中的剩余字段）。

看看能不能解决你的问题。

于 2013-07-26T00:40:32.400 回答