在Java腳本中對不同的文本框進行迭代並分配值

我試圖通過文本框在循環中迭代併爲其分配值。我創建了三個數組列表ids[],id1s[],id2s[]。在Java腳本中對不同的文本框進行迭代並分配值

ids[]中的值必須填充在第一列中，並且它會很好。但需要在第2列和第3列填寫id1s[]和id2[]中的值。循環運行5次。它填充第一時間在第一行，但下一次起了覆蓋第一行..和不來第二排

下面是我的代碼： -

<!DOCTYPE html> 
    <html> 
    <head> 
     <script> 
     function start() 
     { 
      var ids = ["A", "B", "C", "D", "E"]; 
      var id1s = [1,2,3,4,5]; 
      var id2s = [6,7,8,9,10]; 
      for (var i = 0; i < ids.length; i++){ 
      var value=ids[i]; 
      addrow(value); 
      addData(id1s[i], id2s[i]); 
      } 
     } 

     function addrow(value) 
     { 
      var test1 = value+'1'; 
      var test2 = value+'2'; 
      var TABLE = document.getElementById('tableId'); 
      var BODY = TABLE.getElementsByTagName('tbody')[0]; 
      var TR = document.createElement('tr'); 
      var TD1 = document.createElement('td'); 
      var TD2 = document.createElement('td'); 
      var TD3 = document.createElement('td'); 
      TD1.innerHTML = value; 
      TD2.innerHTML = "<input type='text' id='test1' value=''>"; 
      TD3.innerHTML = "<input type='text' id='test2' value=''>"; 
      TR.appendChild (TD1); 
      TR.appendChild (TD2); 
      TR.appendChild (TD3); 
      BODY.appendChild(TR); 
     } 

     function addData(num,num1) 
     { 
      alert("Showing assignment of values"); 
      document.getElementById("test1").value=num; 
      document.getElementById("test2").value=num1; 
     } 
     </script> 
    </head> 
    <body> 

    <table id="tableId" border='1' cellspacing='0' cellpadding='0'> 
    <tr> 
    <td>Variable</td> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <button type="button" onclick="start()">Display</button>     
    </table> 

</body>

請建議如何通過在第二和第三列

來源

2012-12-17 saroj

我修改你的addrow和addData功能

對於addrow樂趣創建的文本框迭代ction 你必須使用內部測試1和測試2的值，以形成輸入IDS 這樣

TD2.innerHTML ="<input type='text' id='"+ test1 + "' value=''>"; 
TD3.innerHTML ="<input type='text' id='"+ test2 + "' value=''>";

爲addData功能的「價值」帶來的變化作爲參數和更改的document.getElementById陳述

document.getElementById(value + "1").value=num; 
document.getElementById(value + "2").value=num1;

請檢查的jsfiddle http://jsfiddle.net/TbGcD/1/

來源

2012-12-17 19:08:34 Saju

嗨每一行，感謝您的幫助。這正是我想要的。 – saroj

根據我的經驗，這樣的事情應該提供不俗的表現

<!DOCTYPE html> 
    <html> 
     <head> 
     <script> 
     function start() 
     { 
      var ids = ["A", "B", "C", "D", "E"]; 
      var id1s = [1,2,3,4,5]; 
      var id2s = [6,7,8,9,10]; 
      var table= document.getElementById('tableId').getElementsByTagName('tbody')[0]; 

      for (var i = 0; i < ids.length; i++){ 
       alert("Showing assignment of values"); 
       table.innerHTML+= '<tr><td>'+ids[i]+'</td><td>'+id1s[i]+'</td><td>'+id2s[i]+'</td></tr>'; 
      } 
     } 
     </script> 
    </head> 
    <body> 
    <button type="button" onclick="start()">Display</button> 
    <table id="tableId" border='1' cellspacing='0' cellpadding='0'> 
     <tr> 
      <td>Variable</td> 
      <td>Value1</td> 
      <td>Value2</td> 
     </tr> 
    </table> 
</body>

如果您不需要查看分配單獨的，我建議做這樣的事情

<!DOCTYPE html> 
    <html> 
     <head> 
     <script> 
     function start() 
     { 
      var ids = ["A", "B", "C", "D", "E"]; 
      var id1s = [1,2,3,4,5]; 
      var id2s = [6,7,8,9,10]; 
      var table= document.getElementById('tableId').getElementsByTagName('tbody')[0]; 
      var text=''; 

      for (var i = 0; i < ids.length; i++){ 
       text+='<tr><td>'+ids[i]+'</td><td>'+id1s[i]+'</td><td>'+id2s[i]+'</td></tr>'; 
      } 
      table.innerHTML+= text; 
      text=''; 
     } 
     </script> 
    </head> 
    <body> 
    <button type="button" onclick="start()">Display</button> 
    <table id="tableId" border='1' cellspacing='0' cellpadding='0'> 
     <tr> 
      <td>Variable</td> 
      <td>Value1</td> 
      <td>Value2</td> 
     </tr> 
    </table> 
</body>

來源

2012-12-17 19:28:09 mkey

感謝哥們。唯一的是第二和第三列應該是文本框。現在我能夠通過saju在這個線程中的回覆來做到這一點... – saroj

沒問題，我很高興你找到了解決方案。 – mkey

在Java腳本中對不同的文本框進行迭代並分配值

回答

相關問題