HTML - Table Creation - Individual Cells to have drop down which will be controlled by master drop down menu's

Question

I have a requirement to create a table ( 4 columns ) which will fetch data from a MySQL DB and display it the first column.

Rest of the columns will each have a drop down with specific values. User has the option to go and change the drop down values. The other possibility is that if the user sees that all the records are of a particular type, user can go ahead and use master drop down to change all the row values for that column.

I have tried to create a page using combination of php, html and javascript.

As of now, I can generate the table, but I am not able to generate the individual drop downs within the cell.

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 Code:

 <?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:

I have tried to create a new jsfiddle. I think its not displaying correctly. I'll try and improve it.

http://jsfiddle.net/8p3oLuuw/

Answer 1

Well, I have find another solution using Jquery. Any one who is looking for similar answer can look for JQuery based Data Grid with Drop Down. This will lead them to a possible solution.