Question

我正在尝试了解如何使用PHP和表格。当我们有以下数据库时：

tblBestemmingen

现在我正在显示我网页内的所有信息：

Webpage

但是当我想现在，当你从选项标签中选择任何一种选项（土地）时，我希望表格只显示该土地的价值。但我不知道该怎么做..

到目前为止，这是我的代码：

HTML：

＆＃13;

<?php
require_once('scripts/config.php');
require_once('scripts/api.php');
session_start();
$bestemmingen = CallAPI("GET", $DB . "/tblbestemming/");
$vluchten = CallAPI("GET", $DB . "/tblvlucht");

$landen = array();
foreach ($bestemmingen as $bestemming) {
    $landen[] = $bestemming['Land'];
}
$landen = array_filter(array_map('trim', $landen));
$land_uniek = array_unique($landen);
sort($land_uniek);
?>

<?php require_once('views/shared/_header.inc'); ?>
    <body>
<header>
    <?php include('views/shared/_nav.inc'); ?>
</header>
<main>
    <div id="load"></div>
    <div id="contents">
        <section class="container">
            <label for="bestemmingen">Bestemming</label>
            <select class="form-control" id="bestemmingen">
                <option>Show all</option>
                <?php
                foreach ($land_uniek as $l_u => $key) {
                    echo "<option value='$l_u' name='bestemmingen'>$key</option>";
                }
                ?>
            </select>
            <table class="table table-striped table-hover sortable">
                <thead>
                <tr>
                    <th>Bestemming</th>
                    <th>Land</th>
                    <th>Type vlucht</th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($bestemmingen as $bestemming) {
                    echo '<tr>';
                    echo '<td>' . $bestemming['Voluit'] . '</td>';
                    echo '<td>' . $bestemming['Land'] . '</td>';
                    if ($bestemming['TypeVlucht'] == 1) {
                        echo '<td> Korte vlucht </td>';
                    } else {
                        echo '<td> Lange vlucht </td>';
                    }
                    echo '</tr>';
                }
                ?>
                </tbody>
            </table>
            </thead>
            </table>
        </section>
    </div>
</main>
<?php require_once('views/shared/_footer.inc'); ?>

＆＃13;

Answer 1

为表格提供ID

将data-land="'$countryname.'"添加到所有TR

foreach ($bestemmingen as $bestemming) {
  echo '<tr data-land="'. $bestemming['Land'] .'">'

然后选择所有行并测试它们是否包含select

中的国家/地区像这样：

window.onload = function() {
  document.querySelector("#bestemmingen").onchange = function() {
    var land = this.value;
    var countryRows = document.querySelectorAll("#countryTable>tbody>tr");
    for (var i = 0; i < countryRows.length; i++) {
      var row = countryRows[i],
        show = land == "" || row.getAttribute("data-land") == land;
      countryRows[i].style.display = show ? "" : "none";
    }
  }
}

<div id="contents">
  <section class="container">
    <label for="bestemmingen">Bestemming</label>
    <select class="form-control" id="bestemmingen">
                <option value="">Show all</option>
                <option value="Nederland">Nederland</option>
                <option value="Denemarken">Denemarken</option>
            </select>
    <table id="countryTable" class="table table-striped table-hover sortable">
      <thead>
        <tr>
          <th>Bestemming</th>
          <th>Land</th>
          <th>Type vlucht</th>
        </tr>
      </thead>
      <tbody>
        <tr data-land="Denemarken">
          <td>DK CPH Kastrup</td>
          <td>Denemarken</td>
        </tr>
        <tr data-land="Nederland">
          <td>NL AMS Schiphol</td>
          <td>Nederland</td>
        </tr>
        <tr data-land="Denemarken">
          <td>DK BLL Billund</td>
          <td>Denemarken</td>
        </tr>
        <tr data-land="Nederland">
          <td>NL RTM Rotterdam</td>
          <td>Nederland</td>
        </tr>
      </tbody>
    </table>
  </section>
</div>

仅显示所选选项的值

1 个答案: