Question

我尝试建立一个注册表单。该寄存器形成一个名为“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>

Answer 1

我认为你工作有点太难以维持地址的顺序，我没有看到一般的理由（如果你有的话，请将它添加到你的问题中）。

如果您使用与您正在执行的唯一索引添加输入，则它们将始终不同并且已订购。

以下是您可以做的事情：

将事件调用者传递给函数Add and 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这些更改（添加了一个提交按钮以显示表单中的其余字段）。

看看它是否解决了你的问题。

名称和ID更改

1 个答案: