Поиск по таблице по названию

180
19 января 2019, 00:20

На странице есть таблица с валютами, вот код

<div class="trading__market-table">
                                    <div class="trading__market-table_vkl">
                                        <div class="trading__market-table-row" id="moneta1" name="moneta1" onclick = 'ChangeCoinProdBuySell("moneta1");'>
                                            <div class="trading__market-table-wrap">
                                                <div class="trading__market-table-circle trading__market-table-circle--green" name="Point_moneta1" onclick='ChangeColorGreenPoint("Point_moneta1");'></div> <!-- green -->
                                                <div class="trading__market-table-coin">moneta1</div>
                                            </div>
                                            <div class="trading__market-table-price">0.068<span>67804</span></div>
                                            <div class="trading__market-table-volume">4644.65</div>
                                            <div class="trading__market-table-change">+2.5%</div>
                                        </div>
</div>

Также есть поле для поиска

<div class="tradigng__market-search">
                                    <div class="trading__h">Markets</div>
                                    <input type="text">
                                </div>

Как реализовать поиск в таблице по названию монеты(по классу trading__market-table-coin)? Т.е если я ввожу moneta1, он должен оставить мне в таблице только эту монету.

Answer 1

var $Input = $('#input-search'); 
var $Resuts = $('#search'); 
$Input.on('keyup click input change', function() { 
  var value = this.value; 
  if (value.length > 0) { 
    $Resuts.find('.row').show().filter(function() { 
      return $(this).find('.name').text().toLowerCase().indexOf(value.toLowerCase()) == -1; 
    }).hide(); 
  } else { 
    $Resuts.find('div').show(); 
  } 
});
.row div { 
  display: inline-block; 
  width: 30%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="input-search" type="text" placeholder="Поиск..." /><br/> 
<div id="search"> 
  <div class="row"> 
    <div class="name">Monet1</div> 
    <div>text1</div> 
    <div>text11</div> 
  </div> 
  <div class="row"> 
    <div class="name">Monet2</div> 
    <div>text2</div> 
    <div>text22</div> 
  </div> 
  <div class="row"> 
    <div class="name">Monet3</div> 
    <div>text3</div> 
    <div>text33</div> 
  </div> 
</div>

READ ALSO
Ограничение по объему хранимых данных Vuex Store

Ограничение по объему хранимых данных Vuex Store

Друзья, подскажите, есть ли какие-нибудь ограничения объема данных, которые можно постоянно держать в Vuex StoreОтразиться ли на скорости работы...

113
Перенаправление на другую страницу php

Перенаправление на другую страницу php

есть код отправления почты с формы, нужно сделать перенаправление со страницы отправки на главную страницу сайтаВот код отправки:

138
Заполнение данных mysql

Заполнение данных mysql

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

191
Asterisk Mysql в dialpan не выдает результат

Asterisk Mysql в dialpan не выдает результат

Добрый вечер всем специалистов по звездочке, есть такая очень интересная проблема:

154