2

テキストボックスをループして繰り返し、値を割り当てようとしていました。3つの配列リスト、、を作成しids[]ましid1s[]たid2s[]。

の値ids[]は最初の列に入力する必要があり、うまくいきます。ただし、値は2番目id1s[]とid2[]3番目の列に入力する必要があります。ループは5回実行されます。最初は最初の行に入力されますが、次回以降は最初の行が上書きされ、2番目の行には表示されません。

以下は私のコードです：-

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

2列目と3列目に作成されたテキストボックスを繰り返す方法を提案してください

4

2 に答える 2

1

addrow関数とaddData関数を変更しました

addrow関数の場合このような入力IDを形成するには、test1とtest2内の値を使用する必要があります

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

addData関数の場合、「value」変数をパラメーターとして取り込み、document.getElementByIdステートメントを次のように変更します。

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

jsFiddlehttp : //jsfiddle.net/TbGcD/1/を確認してください

于 2012-12-17T19:08:34.553 に答える
0

私の経験では、このようなものはまともなパフォーマンスを提供するはずです

<!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-17T19:28:09.643 に答える