0

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

<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, он должен оставить мне в таблице только эту монету.

1 ответ 1

2

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>

2
  • Спасибо большое, а не могли бы вы сделать конкретно под мой тип таблицы?
    – Midnight
    Commented 29 сент. 2018 в 11:09
  • Если бы пример содержал больше строк (таблица непосредственно), можно было бы, а сейчас это действие наверняка.
    – romanvht
    Commented 29 сент. 2018 в 13:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.