如何显示基于价格的目的地表

How to display a table of destinations based on prices

本文关键字：于价格 地表 何显示 显示      更新时间：2023-09-26

我有一个"目的地"表，其中包含以下html。

<table align = "center" class="table table-bordered" style = "border-radius: 15px;">
        <tr>
           <th>Destination</th>
           <th>Description</th>
           <th>Price</th>
        </tr>
        <tr>
           <td>Villa Jibacoa <br><img style= "height:150px; width:170px; float:left;"src = "images/Villa.jpg"/></td>
           <td>
            <ul>
              <li>255 rooms</li>
              <li>One 9-storey building</li>
              <li>4 restaurants</li>
              <li>5 bars</li>
              <li>Pool</li>
              <li>110 and 220 volts (adaptor required)</li>
            </ul>
            </td>
           <td>$784 <div style="position: relative; margin-top: 40px;"><button  id = "first" type="button" onclick = "SeatAssignment(1)" class="btn btn-success">Book Now!</button></div></td>
        </tr>
        <tr>
           <td>Gran Caribe Puntarena <br><img style= "height:150px; width:170px; float:left;"src = "images/grandcarib.jpg"/></td>
           <td> 
              <ul>
              <li>110 rooms</li>
              <li>Bungalow-style villas</li>
              <li>2 restaurants</li>
              <li>2 bars</li>
              <li>Pools</li>
              <li>220 volts (adaptor required)</li>
            </ul>
           </td>
           <td> $947 <div style="position: relative; margin-top: 40px;"><button  type="button" onclick = "SeatAssignment(2)" class="btn btn-success">Book Now!</button></div></td>
        </tr>

在另一个 html 文件中，我有一个计算器表单。我拥有它，以便根据用户输入的价格返回在其价格范围内的旅行。这是表格：

<form onSubmit="return MoneyForTrip();">
<h1> Enter the amount of money you would like to spend on your next trip. </h1><br>
        <div class="input-group">
          <span class="input-group-addon">$</span>
          <input type="text" id= "moneyfortrip" class="form-control">
        </div>
        <br>
        <button type="submit" class="btn btn-default">Show My Trips</button>
        </form>

以及它在提交时传递的 Javascript 函数：

function MoneyForTrip()
{

var money = parseInt(document.getElementById('moneyfortrip').value);
if (money <= 800)
{
}
else if (money > 800 && money <=1200)
{
}
else if (money > 1200 && money <=2000)
{
}
else if (money > 2000)
{
}
else
{
}
return false;
}

不确定在 if 和 else if 语句中放入什么。我希望根据用户的输入属于哪个括号，它将显示该价格范围内的行程。我想用一个表格在与我的计算器表单页面相同的页面上列出适当的旅行。

有什么想法吗？谢谢！

常见的模式是将属性应用于元素以对其进行分类，然后使用属性有条件地隐藏或显示所需的元素。

这是一个有条件地显示行的示例 JS 小提琴。注意：我使用jQuery作为document.getElementByClassName仍然没有完全支持跨浏览器：

http://jsfiddle.net/eqkmv/1/

这是一个增强的JavaScript方法。它将隐藏所有具有名为"trip-result"的类的元素。然后它将显示与 if 语句匹配的元素。

function MoneyForTrip() {
    var money = parseInt(document.getElementById('moneyfortrip').value);
    $('.trip-result').hide();
    if (money <= 800) {
        $('.trip-less-800').show();
    }
    if (money > 800 && money <= 1200) {
        $('.trip-800-1200').show();
    }
}

这是对 html 的重要更新。注意到它有两个类。一个用于在我们匹配条件时识别它。当我们想要隐藏它时，一个可以识别它。此外，它一开始是不可见的。

<tr class="trip-less-800 trip-result" style="display:none">

有很多方法。例如，您可以将一个类分配给不同价格范围内的不同表行，然后使用 JavaScript 根据需要使它们可见或不可见。

相关文章：