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>

但不知怎的，我的代码不起作用......有人能给我一个暗示我做错了什么吗？

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

我认为附加行的问题，所以尝试重新定义表变量：

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

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

2 个答案: