Javascript HTML-表格创建-单个单元格具有下拉列表，该下拉列表将由主下拉菜单的

我需要创建一个表4列，它将从MySQL数据库中获取数据并在第一列中显示

其余的列都将有一个带有特定值的下拉列表。用户可以选择转到并更改下拉列表值。另一种可能性是，如果用户看到所有记录都是特定类型的，则用户可以继续使用master下拉菜单更改该列的所有行值

我尝试使用php、html和javascript的组合来创建页面

到目前为止，我可以生成表，但无法生成单元格中的各个下拉列表

JavaScript:

<script type="text/javascript">
    var i = 0;
    var option;

    // document.getElementById("tbody").addEventListener("load", addSelect, false);
    function addSelect(value12)
    {
        window.alert(value12);

        var select = document.createElement("select");
        select.setAttribute("name", "mySelect" + i);
        select.setAttribute("id", "mySelect" + i);

        option = document.createElement("option");
        option.setAttribute("value", "value one");
        option.innerHTML = "ONE";
        select.appendChild(option);

        option = document.createElement("option");
        option.setAttribute("value", "value two");
        option.innerHTML = "TWO";
        select.appendChild(option);

        document.getElementById(value12).appendChild(select);
        i++;
    }

</script>

PHP代码：

 <?php
    $servername = "localhost";
    $username = "root";
    $password = "password";
    $dbname = "northwind";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error)
    {
        die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT firstname FROM employees";

    $result = $conn->query($sql);

    echo '
        <br>
        <table id="table1" align="center" valign="center" cellspacing="0" cellpadding="0" border="0">
            <thead>
            <tr>
                <th>Species</th>
                <th>PR</th>
                <th>TN</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><select id="Species1" onchange="selectElement(9,this.value)"> >
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>
                </select></td>
                <td><select id="Species2" onchange="selectElement(9,this.value)">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>
                </select></td>
                <td><select id="Species3" onchange="selectElement(9,this.value)">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>
                </select></td>
            </tr>
            </tbody>
        </table>
';

    if ($result->num_rows > 0)
    {
        // output data of each row
        echo '<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">';
        echo '<thead><tr><th>Primary Studies</th><th>Species</th><th>PR</th><th>TN</th>/tr></thead>';
        $i = 1;
        $j = 1;
        $k = 1;

        echo '<tbody id="tbody">';
        while($row = $result->fetch_assoc())
        {
            $var1 = "id" . $i;
            $var2 = "by" . $j;
            $var3 = "km" . $k;


            echo '<tr>';
            echo "<td>".$row[FirstName]."</td>";
            echo '<td id=""><script>addSelect(';$var1;')</script></td>';
            echo '<td id=$var2><script>addSelect($var2)</script></td>';
            echo '<td id=$var3><script>addSelect($var3)</script></td>';
            echo '</tr>';

            $i++;
            $j++;
            $k++;

        }
        echo '</tbody>';
        echo '</table><br />';

    }
    else
    {
        echo "0 results";
    }

    $conn->close();
?>

JSFiddle：

我试图创建一个新的JSFIDLE。我认为它显示不正确。我会努力改进的

---

我已经找到了另一个使用Jquery的解决方案。任何想要寻找类似答案的人都可以使用下拉列表查找基于JQuery的数据网格。这将引导他们找到一个可能的解决方案。

欢迎使用堆栈溢出。你能发布你已经尝试过的吗？欢迎来到Stackoverflow！然而，在任何人给你打分之前，都有一个提问程序，这样人们就能更好地了解如何帮助你。首先是显示您的代码—不是全部代码，而是适用于您的问题的代码位—HTML和CSS，以及Javascript。更好的是，如果您可以访问jsfiddle.net并设置一个提琴供我们查看。在本例中，您需要在四列中显示您想要显示的内容-目前，仅从您的描述，我们无法清楚地看到您想要实现的目标。祝你一切顺利！我已经找到了另一个使用Jquery的解决方案。任何想要寻找类似答案的人都可以使用下拉列表查找基于JQuery的数据网格。这将使他们找到一个可能的解决办法。