javascript - HTML - 表格创建 - 具有下拉菜单的单个单元格将由主下拉菜单控制

Question

我需要创建一个表(4 列)，该表将从 MySQL 数据库获取数据并将其显示在第一列。

其余列各有一个包含特定值的下拉菜单。用户可以选择更改下拉值。另一种可能性是，如果用户看到所有记录都属于特定类型，则用户可以继续使用主下拉列表来更改该列的所有行值。

我尝试使用 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:

我尝试创建一个新的jsfiddle。我认为它显示不正确。我会尝试并改进它。

http://jsfiddle.net/8p3oLuuw/

Answer 1

嗯，我找到了另一个使用 Jquery 的解决方案。任何正在寻找类似答案的人都可以寻找带有下拉菜单的基于 JQuery 的数据网格。这将引导他们找到一个可能的解决方案。