JavaScriptを使用して動的に行を追加する

Question

ここでは、ユーザーが「AddNewRow」ボタンをクリックすると、テーブルに行を動的に追加しています。 はここ

<script type="text/javascript"> 
     function addRow() { 

      var table = document.getElementById("modaltable"); //Table ID 
      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 
      var colCount = table.rows[1].cells.length; 

      for (var i = 0; i < colCount; i++) { 
       var newcell = row.insertCell(i); 
       newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch (newcell.childNodes[0].type) { 
        case "Comment": 
         newcell.childNodes[i].value = ""; 
         break; 
        case "DropDownList2": 
         newcell.childNodes[i].selectedIndex = 0; 
         break; 
        case "DropDownList1": 
         newcell.childNodes[i].selectedIndex = 0; 
         break; 
       } 
      } 
     } 
     </script> 

ボタンのコード行を追加するため、dynamilly行を追加するためのコードです。 新しい行を追加

[追加]ボタンをクリックすると、別の行が動的に追加されます。しかしここでは行を追加していますが、行は最初の行の値をデフォルトとして取ります。しかし、私は別の行の最初の行を選択した値は必要ありません。上記のコードの間違い。

Answer 1

新しい行の値があるためこのラインの繰り返される

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

新しいセルの値は、既存の行のセル値からコピーされます。

ので、ちょうどこの

newcell.innerHTML = 'newVal'+(i+1)のように、新しい行のセル値を更新するには、この行を参照してください。

Live Demo @ JSfiddle

Answer 2

新しい動的に生成された行の最初の行選択された値を必要としない場合は、次のコードを交換する必要があります。

newcell.innerHTML = "";