Как отобразить таблицу направлений по ценам

Question

У меня есть таблица «пунктов назначения» со следующим 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; 

} 

Не уверен, что положить в КРП и еще, если заявления. Я бы хотел, чтобы он в зависимости от того, какой кронштейн вводит вход пользователя, отобразит поездку в пределах этого ценового диапазона. Я хотел бы, чтобы в таблице были указаны соответствующие поездки на той же странице, что и моя страница формы калькулятора.

Любые идеи? Спасибо!

Answer 1

Общий шаблон - применять атрибуты к элементам для их категоризации, а затем использовать атрибуты для условного скрытия или отображения желаемых элементов.

Вот пример JS Fiddle для отображения строк условно. Примечание: Я использовал 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"> 

Answer 2

Существует много способов. Например, вы можете назначить класс для разных строк таблицы в разных ценовых диапазонах, а затем с помощью JavaScript вы сделаете их видимыми или невидимыми по мере необходимости.