Home/ Questions/Q 9000499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:19:08+00:00

I was trying to iterate in loop through text boxes and assign values to

  • 0

I was trying to iterate in loop through text boxes and assign values to it. I have created three array list ids[],id1s[],id2s[].

values in ids[] have to be populated in the first column and its coming fine. but values in id1s[] and id2[] need to be populated in the 2nd and 3rd column. loop run 5 times. first times it populating in the first row, but from next time onward its overriding the first row.. and not coming to second row

Below is my code :–

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

please suggest how to iterate through the text boxes created in 2nd and 3rd column

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I modified your addrow and addData functions

    For addrow function
    You have to use the value inside test1 and test2 to form the input ids
    like this 

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

    for addData function bring in the ‘value’ variable as a parameter
    and change the document.getElementById statements as

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

    Please check jsFiddle http://jsfiddle.net/TbGcD/1/

    • 0