dswg47377
dswg47377
2018-12-22 05:23

通过将<select>值与列值(PHP,HTML,Javascript)进行比较来过滤HTML表

I have a dropdown <select> HTML menu created from a MySQL table using PHP. Each <option> value contains a socket, I have a HTML table created from a MySQL table using PHP which contains a column "Socket". I want to filter the table to only show matching sockets to the one selected in the <select> menu.

I have tried modifying Javascript search code to no success.

The code for the table creation is:

$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td><a href='https://au.pcpartpicker.com/product/".$row["id"]."' target='_blank'>" . $row["name"]. "</a></td><td>" . $row["price"]."</td><td>" . $row["socket"]."</td><td>" . $row["chipset"]."</td><td>" . $row["ramslots"]."</td><td>" . $row["maxram"]."</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

The code for the <select> menu is:

$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<select name='CPUmenu'>";
    echo "<option value='CPU'>CPU</option>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<option value='".$row["socket"]."'>".$row["name"]."</option>";
    }
    echo "</select>";
} else {
    echo "0 results";
}

Here is the link to the entire webpage code: pastebin.com/WztPQzRG

cpu SQL fiddle: db-fiddle.com/f/teZxiaduNVjuYCj1pWjj73/0

motherboard SQL fiddle: db-fiddle.com/f/pSs8yKNrgTqtiwdTbmWcg/0

Update: Here is my PHP

$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<select name='CPUmenu'>";
    echo "<option value=''>CPU</option>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<option value='". $row["socket"] . "'>".$row["name"]."</option>";
    }
    echo "</select>";
} else {
    echo "0 results";
}

$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo '<tr data-socket="'. $row['socket'] . '"><td><a href="https://au.pcpartpicker.com/product/' . $row['id'] . '" target="_blank">' . $row['name'] . '</a></td><td>' . $row['price'] . '</td><td>' . $row['socket'] . '</td><td>' . $row['chipset'] . '</td><td>' . $row['ramslots'] . '</td><td>' . $row['maxram'] . '</td></tr>';
    }
    echo "</table>";
} else {
    echo "0 results";
}

Update 2:

I have tried troubleshooting by adding:

echo "<option value='AM4'>AM4</option>";
echo "<option value='LGA1151'>LGA1151</option>";

And

echo "<tr data-socket='AM4'><td></td><td></td><td></td><td></td><td></td><td></td></tr>";

However nothing happens still. All I can think is the script isn't added right or something; here it is:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$('select[name="CPUmenu"]').change(function(e) {
  let socket = $(this).val();
  $('tr[data-socket]').show();
  if (socket.length) {
    $('tr[data-socket!="' + socket + '"]').hide();
  }
});
</script>
</body>
</html>

What other troubleshooting steps can I take?

I need to get a Javascript function which runs whenever a new option is selected from the <select> menu, the function needs to get the selected <select> menu socket name then loop through each row in the table and check if the socket matches, otherwise hide the row.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doukougua7873 doukougua7873 3年前

    Start by adding something into the table row to identify the socket. Let's use a data attribute:

    echo '<tr data-socket="'. $row['socket'] . '"><td><a href="https://au.pcpartpicker.com/product/' . $row['id'] . '" target="_blank">' . $row['name'] . '</a></td><td>' . $row['price'] . '</td><td>' . $row['socket'] . '</td><td>' . $row['chipset'] . '</td><td>' . $row['ramslots'] . '</td><td>' . $row['maxram'] . '</td></tr>';
    

    Also change your default option line to this

    echo "<option value=''>CPU</option>";
    

    I'm going to suggest that you use jQuery because it's going to make your life easier. So add just before the close of your body tag

    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    

    Then you need to create a listener for the select to change and then hides anything that doesn't match the selected CPU socket. Put this right AFTER the script tag above that included the jQuery library.

    <script>
        $(function() {
            $('select[name="CPUmenu"]').change(function(e) {
              let socket = $(this).val();
              $('tr[data-socket]').show();
              if (socket.length) {
                $('tr[data-socket!="' + socket + '"]').hide();
              }
            });
        });
    </script>
    
    点赞 评论 复制链接分享

相关推荐