将多个下拉列表添加到填充了数据库值的表中

Question

我已经创建了动态表，它在单击按钮后在最后添加行。在一列中我有dropdown list，我想包含数据库值。

这是我如何创建我的表：

<script type="text/javascript"> 
    function createRow() { 
     var row = document.createElement('tr'); // create row node 
     var col = document.createElement('td'); // create column node 
     var col2 = document.createElement('td'); // create secondcolumn node 
     var col3 = document.createElement('td'); // create next node 
     var col4 = document.createElement('td'); // create next column node 
     var col5 = document.createElement('td'); // create next column node 
     row.appendChild(col); // append first column to row 
     row.appendChild(col2); // append second column to row 
     row.appendChild(col3); // append next column to row 
     row.appendChild(col4); // append next column to row 
     row.appendChild(col5); // append next column to row 
     col.innerHTML = '<select name="search-alias-0017" id="hasla" title="Search in">' + 
      '<option value="aps" selected="selected">--Wybierz z listy--</option> ' + 
      '<option value="stripbooks">opcja</option>' + 
      '<option value="popular">Haslo2</option>' + 
      '</select>'; 

     c//rest columns 
     var table = document.getElementById("tableToModify"); // find table to append to 
     table.appendChild(row); // append row to table 
    } 
</script> 

现在我有drop down list两种选择。我修改了这个，并从我的数据库中加载了一些变量，我希望这些值被放到<option>标记中。其实我的长相JS：

<script type="text/javascript"> 
     function createRow() { 
<? $q = "select name from vulnerability"; 
     $result = $db - > query($q) - > fetchall(); ?> 
     var options = ''; 
     options += '<select name="search-alias-0017" id="hasla" title="Search in">'; 
     for (var i = 0; i < <? echo $result(sizeof($result); ?> ; i++) { 
      options += '<option> <? echo $result[i]['name ']; ?> < /option>'; 
    } 
    options+='</select > '; 
      var row = document.createElement('tr'); // create row node 
      var col = document.createElement('td'); // create column node 
      var col2 = document.createElement('td'); // create secondcolumn node 
      var col3 = document.createElement('td'); // create next node 
      var col4 = document.createElement('td'); // create next column node 
      var col5 = document.createElement('td'); // create next column node 
      row.appendChild(col); // append first column to row 
      row.appendChild(col2); // append second column to row 
      row.appendChild(col3); // append next column to row 
      row.appendChild(col4); // append next column to row 
      row.appendChild(col5); // append next column to row 
      col.innerHTML = options; 

      c//rest columns 
      var table = document.getElementById("tableToModify"); // find table to append to 
      table.appendChild(row); // append row to table 
     } 
    </script> 

但不知何故，我的代码does not工作...有人可以给我一个提示我究竟做错了什么？

Answer 1

首先尝试执行

col.innerHTML = '<select name="search-alias-0017" id="hasla" title="Search in">' + 
      '<option value="aps" selected="selected">--Wybierz z listy--</option> ' + 
      '<option value="stripbooks">opcja</option>' + 
      '<option value="popular">Haslo2</option>' + 
      '</select>'; 

然后

row.appendChild(col); 

进行更改col如果追加后做也不会做任何改变。当你追加时，appendChild()函数会复制它的输入参数，所以在这之后，你无法按照你尝试的方式访问它。

Answer 2

我想在你的追加行中的问题，因此要尽量redfine表变量：

var table = document.getElementById("tableToModify").getElementsByTagName("tbody")[0]; 
table.appendChild(row);