Question

我有一个php网站，我正在使用MySQL数据库构建。我有一个适用的票务系统，但我想添加一个下拉选择菜单（如表格输入选择菜单），它有三个选项：全部，打开，关闭。

根据所选的选项，我希望它更新显示的票证，以便仅显示我所选择的内容（分别为所有票证，打开票证或已关闭的票证）（无需点击按钮，它只是更新为我自动选择一个选项）。我花了过去30分钟到一个小时在stackoverflow，google和其他一些地方搜索有关如何执行此操作的信息，但所有相关主题似乎与使用javascript或AJAX（我不喜欢和＃39）有关。 ;我知道如何编码，和javascript我试图阻止我的网站，以避免问题，如果客户端已禁用其浏览器的JavaScript）。

有没有办法只使用PHP，MySQLi和HTML / CSS，或者我需要使用javascript / AJAX来实现这一目标吗？

我的当前代码更新了我的表作为故障单添加：

function createTicket() {

require_once('config.inc.php');

// Connect to database
$mysqli = @new mysqli(DB_HOSTNAME,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
// Check connection
if (mysqli_connect_errno()) {
    printf("Unable to connect to database: $s", mysqli_connect_errno());
    exit();
}

$sql = "SELECT * FROM Tickets";
$result = $mysqli->query($sql);

$count = mysqli_num_rows($result);

$i = 0;

if (is_object($result) && $result->num_rows > 0) {
    while ($i<$count) {
        $sql2 = "SELECT * FROM Tickets WHERE id = ".$i;
        $tickets = $mysqli->query($sql2);
        $row = mysqli_fetch_array($tickets);

        // Set variables from query data        
        $ticketnum = $row['ticket'];
        $name = $row['name'];
        $email = $row['email'];
        $phone = $row['phone'];
        $address = $row['address'];
        $apt = $row['apt'];
        $city = $row['city'];
        $state = $row['state'];
        $zip = $row['zip'];
        $service = $row['service'];
        $detail = $row['detail'];
        $date = $row['reg_date'];
        $status = $row['status'];
        $tech = $row['tech'];

        // Create Table Row from variables
        echo "<tr><td>";
        echo "<a href='../ticket.php?ticketNum=".$ticketnum."'>".$ticketnum."</a>";
        echo "</td><td>";
        echo $status;
        echo "</td><td>";
        echo $service;
        echo "</td><td>";
        echo $date;
        echo "</td><td>";
        echo $tech;
        echo "</td></tr>";

        $i++;
        }
}

$mysqli->close();
}

这是表格本身的代码：

<table id="tickettab">
<tr>
<td>
Ticket #
</td>
<td>
Status
</td>
<td>
Service-Type
</td>
<td>
Date Created
</td>
<td>
Tech Assigned
</td>
</tr>
<!-- New Row -->
<?php
createTicket();
?>
</table>

Answer 1

没有javascript就不可能。但是，你不需要很多。

首先，您的选择下拉列表将如下所示;给它一个 id ，这样你就可以轻松地引用它了：

<select id="filter">
    <option>All</option>
    <option>Closed</option>
    <option>Open</option>
</select>

然后制作你的桌子。但是不要在循环中执行第二次查询。而是使用fetch_assoc循环第一个查询的结果，如下所示：

<?php
    ...
    if (is_object($result) && $result->num_rows > 0) {
        // Do not perform another SELECT, just iterate over the result set
        while ($row = $result->fetch_assoc()) {
            // Set variables from query data 
            $ticketnum = $row['ticket'];
            $name = $row['name'];
            $email = $row['email'];
            $phone = $row['phone'];
            $address = $row['address'];
            $apt = $row['apt'];
            $city = $row['city'];
            $state = $row['state'];
            $zip = $row['zip'];
            $service = $row['service'];
            $detail = $row['detail'];
            $date = $row['reg_date'];
            $status = $row['status'];
            $tech = $row['tech'];

            // Create Table Row from variables: 
            // Mark it with a custom data-status attribute
            echo "<tr data-status='$status'>";
            echo "  <td><a href='../ticket.php?ticketNum=$ticketnum'>$ticketnum</a></td>";
            echo "  <td>$status</td>";
            echo "  <td>$service</td>";
            echo "  <td>$date</td>";
            echo "  <td>$tech</td>";
            echo "</tr>";
        }
    }
?>

请注意，在上面的代码中，TR标记会将自定义属性 data-status 设置为状态值。这样可以更轻松地过滤行。

然后，在HTML的末尾附近，您应该输出以下script标记和代码：

<script>
// Whenever the selection of the filter drop-down changes:
document.getElementById('filter').onchange = function() {
    // Get the selected filter value (Open, Closed, or All)
    var filter = this.value;
    // Iterate over all rows that have a data-status attribute
    [].forEach.call(document.querySelectorAll('tr[data-status]'), function (tr) {
        // Show/hide this row based on filter:
        tr.style.display = tr.getAttribute('data-status') === filter || filter == 'All'
            ? ''
            : 'none';
    });
}
</script>

评论解释会发生什么。使用每个TR标记的自定义数据状态属性执行过滤。如果它与所选过滤器值匹配，或者如果用户选择＆＃34;全部＆＃34;，则将显示相应的行。否则，使用display: none css style隐藏它。

它是纯Javascript，不需要JS库。

但是，如果您使用jQuery，则上述内容将按如下方式编写：

<script>
// Whenever the selection of the filter drop-down changes:
$('#filter').change(function() {
    // Get the selected filter value (Open, Closed, or All)
    var filter = this.value;
    // Iterate over all rows that have a data-status attribute
    $('tr[data-status]').each(function () {
        // Show/hide this row based on filter:
        $(this).toggle($(this).attr('data-status') === filter || filter == 'All');
    });
});

像jQuery这样的库的优势在于您可以更好地支持旧版浏览器。值得注意的是，纯Javascript解决方案中使用的方法forEach和querySelectorAll在旧版浏览器中不受支持。作为奖励，代码也更短。

在任何一种情况下，都没有与服务器交互以应用过滤器。这一切都发生在客户端。

使用php根据下拉选择更新表

1 个答案: