動的タグに動的ドロップダウンリストを挿入するにはどうすればよいですか？

Question

私は動的なドロップダウンリストを作成しようとしましたが、動作しません。

Start-up screen

私はボタン「行追加」をクリックすると、それは次のように変更します。

Here is the problem

最初のリストのようなドロップダウンリストを追加しましたが、データが存在しない、私は本当にしたいの変化。

ここにコードがあります。

<button id='btn-add-row'>Add Row</button> 
    <button id='btn-delete-row'>Delete Row</button> 
     <script src="//code.jquery.com/jquery.min.js"></script> 
     <script> 
     $('#btn-add-row').click(function() { 
      $('#mytable > tbody:last').append('<tr><td><input type="checkbox"><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>' + 
     '<tr><td><td></td><td><select id="slist"></select></td><td></td></tr>'); 
     }); 
     $('#btn-delete-row').click(function() { 
      $('#mytable > tbody:last > tr:last').remove(); 
      $('#mytable > tbody:last > tr:last').remove(); 
     }); 

     setattr(); 

     function setattr(){ 
      var myobject = { 
      ValueA : 'Text A', 
      ValueB : 'Text B', 
      ValueC : 'Text C' 
     }; 

     var select = document.getElementById("slist"); 
     for(index in myobject) { 
      select.options[select.options.length] = new Option(myobject[index], index); 
     } 

     if(select.options.length > 0) { 
      // window.alert("Text: " + select.options[select.selectedIndex].text + "\nValue: " + select.options[select.selectedIndex].value); 
     } 
     else { 
      window.alert("Select box is empty"); 
     } 
     } 
     </script> 

ありがとうございました。

Answer 1

私の解決策はDOMメソッドを使用しており、jsfiddle.netに投稿されています。

var myTable=document.getElementById("mytable"); 
$('#btn-add-row').click(function() { 
row=mytable.insertRow(mytable.rows.length); 
cell=row.insertCell(row.length); 
cell=row.insertCell(row.length); 
cell=row.insertCell(row.length); 
dropDownBox=document.createElement("select"); 
buildDropDownBox(dropDownBox); 
cell.appendChild(dropDownBox); 
cell=row.insertCell(row.length); 
}); 
$('#btn-delete-row').click(function() { 
myTable.deleteRow(mytable.rows.length-1); 
}); 
function buildDropDownBox(select) 
{ 
    var myobject = { 
     ValueA : 'Text A', 
     ValueB : 'Text B', 
     ValueC : 'Text C' 
    }; 
    for(index in myobject) { 
     select.options[select.options.length] = new Option(myobject[index], index); 
    } 
}