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


Adding multiple dropdown lists into table populated with database values

我创建了动态表,它在单击按钮后在末尾添加行。在一列中,我有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);