我创建了动态表,它在单击按钮后在末尾添加行。在一列中,我有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>
但是我的代码不工作…谁能给我提示一下我做错了什么吗?
尝试先执行
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()
函数复制它的输入参数,所以在那之后你就不能像你尝试的那样访问它了。
我认为问题在追加你的行,所以尝试重新定义表变量:
var table = document.getElementById("tableToModify").getElementsByTagName("tbody")[0];
table.appendChild(row);