姓名和身份證號碼變化

我嘗試建立一個註冊表單。該寄存器形式爲稱爲「地址1」的文本框，並在其附近有稱爲「添加地址」的按鈕。按鈕的功能 - 它爲更多地址添加文本框。先前地址框附近的按鈕變爲「刪除」，刪除地址框和按鈕。問題是：我必須按順序設置文本框 - 1,2,3，... - 我必須更改它們的名稱和ID。例如 - 如果我刪除地址欄編號4（名稱，編號=「地址4」），則所有下一個文本框的名稱和編號應該減少1.我嘗試在for循環中執行此操作。這很難解釋，所以我只是給你的代碼。嘗試在你的VS中編寫例如'document.getElementById（「address」+ n）。'你會發現你甚至在列表中看不到你可以在點號或名稱或值之後寫入的內容。我意識到這是因爲有一個變量，這是我想的問題。現在這裏的代碼：姓名和身份證號碼變化

<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>

來源

2013-07-25 Yuval Simon

爲什麼不只是總是刪除最後一個？ –

你想用這個完成什麼？你只是想刪除文本框？ –

這些都是動態的，你不必每次都改變所有的數字，只要確保新的數字與「最大」是唯一的。 – Hogan

我覺得你的工作有點太難以維持地址的順序，我沒有看到一個普通的理由這樣做（如果有，請把它添加到你的問題）。

如果您像使用一樣添加具有唯一索引的輸入，它們將始終是不同的並且是有序的。

這裏是你可以做什麼：

傳遞事件呼叫者的功能添加和刪除，並在裏面可以讓你想這些元素的變化。

例如您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-26 00:40:32

是的，它的工作原理！非常感謝。（我需要設置地址以便將它們發送到另一個頁面，將它們打印並將它們插入到我的項目的數據庫中。） –

姓名和身份證號碼變化

回答

相關問題