点击下拉按钮

时间:2017-09-23 07:12:38

标签: php html css

我在这里有一个下拉式菜单:

<div class="btn-group" role="group">
  <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Choose A Day
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" value="Monday" >Monday</a>
    <a class="dropdown-item" value="Tuesday" >Tuesday</a>
    <a class="dropdown-item" value="Wednesday" >Wednesday</a>
    <a class="dropdown-item" value="Thursday">Thursday</a>
    <a class="dropdown-item" value="Friday">Friday</a>
    <a class="dropdown-item" value="Saturday">Saturday</a>
  </div>
</div>

我还有一张空桌子:

<table border="2">
  <thead>
    <tr>
      <td>Lesson_id</td>
      <td>Teacher</td>
      <td>Lesson</td>
      <td>Day</td>
      <td>Time</td>
      <td>Classroom</td>
      <td>Year</td>
      <td>Curriculum</td>
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>

我有一个php函数:

<?php
function get_data_from_day($day)
{
include('dbh.inc.php');
global $conn;
$query = "SELECT * FROM  ";
$result = $conn->query($query);
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
    echo "<tr>";
    echo "<td>" . $row['Lesson_id'] . "</td>";
    echo "<td>" . $row['Teacher'] . "</td>";
    echo "<td>" . $row['Lesson'] . "</td>";
    echo "<td>" . $row['Day'] . "</td>";
    echo "<td>" . $row['Time'] . "</td>";
    echo "<td>" . $row['Classroom'] . "</td>";
    echo "<td>" . $row['Year'] . "</td>";
    echo "<td>" . $row['Curriculum'] . "</td>";
    echo "</tr>";
}
}

最后我有一个数据库名称school.Inside是从星期一到星期五的6表。我想在点击下拉菜单时从数据库中检索数据。例如,如果我点击星期一按钮将返回所有数据来自星期一的表等。有什么解决方案吗

1 个答案:

答案 0 :(得分:0)

我认为你无法使用php,因为php会在页面加载到服务器之前运行。相反,我会使用javascript或jquery;我在这里找到了:

How to get data from database in javascript based on the value passed to the function

如何在javascript中从数据库中获取数据。

我认为你可以使用类似的东西:

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

首先打开数据库:

try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var db = openDatabase(shortName, version, displayName, maxSize);

        // You should have a database instance in db.
    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

然后,您可以创建一个SQL查询函数:

function errorHandler(transaction, error)
{
    // error.message is a human-readable string.
    // error.code is a numeric error code
    alert('Oops.  Error was '+error.message+' (Code '+error.code+')');

    // Handle errors here
    var we_think_this_error_is_fatal = true;
    if (we_think_this_error_is_fatal) return true;
    return false;
}

function dataHandler(transaction, results)
{
    // Handle the results
    var string = "Green shirt list contains the following people:\n\n";
    for (var i=0; i<results.rows.length; i++) {
        // Each row is a standard JavaScript array indexed by
        // column names.
        var row = results.rows.item(i);
        string = string + row['name'] + " (ID "+row['id']+")\n";
    }
    alert(string);
}
function getSQLData(day){
db.transaction(
    function (transaction) {
        transaction.executeSql("SELECT * from " + day + ";",
            [], // array of values for the ? placeholders
            dataHandler, errorHandler);
    }
);
}

然后你可以这样调用这个函数:

 <a class="dropdown-item" value="Monday" onClick="javascript:getSQLData('Monday');" >Monday</a>

希望这可以让你了解如何做到这一点。