Добавьте стиль css, используя Javascript, когда выбрана опция выбора - PullRequest
Новая
       32

Добавьте стиль css, используя Javascript, когда выбрана опция выбора

0 голосов
/ 19 февраля 2020

Есть ли способ добавить стиль к существующему классу, используя Javascript, в зависимости от того, какой вариант вы выбрали в раскрывающемся списке выбора html?

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

Большое спасибо! 

<h2>Finder</h2>
<div class="step1">
  <p>Show category:</p>
</div>

<select type="search" class="select-table-filter" data-table="order-table" id="searchInput">
  <option value="">All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<input type="search" class="light-table-filter" data-table="order-table" placeholder="Search ..." />
<table class="order-table" id="myTable">
  <thead>
    <tr class="header">
      <th>Category</th>
      <th>Name</th>
      <th>Last Name</th>
      <th>Phone</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Taylor</td>
      <td>Swift</td>
      <td>1234 5678</td>
      <td>taytay@gmail.com</td>
    </tr>
    <tr>
      <td>2, 3</td>
      <td>John</td>
      <td>Smith</td>
      <td>1234 5678</td>
      <td>johnnyboy@gmail.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jane</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>dohnut@gmail.com</td>
    </tr>
    <tr>
      <td>3, 4</td>
      <td>Taylor</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>td@gmail.com</td>
    </tr>
  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020 

(function () {
    var previous;
    $("select[name=searchInput]").focus(function () {
        // Store the current value on focus, before it changes
        previous = this.value;
    }).change(function() {
      if(previous) {
      let element = $('#' + previous);
      element.removeClass("active");
      }
     
     let element = $('#' + this.value);
      element.addClass("active");
     
     previous = this.value;
    });
})();
.active{
color: white;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Finder</h2>
<div class="step1">
  <p>Show category:</p>
</div>
<select type="search" name='searchInput' class="select-table-filter" data-table="order-table" id="searchInput">
  <option value="all">All</option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>  
  <option value="four">4</option>

</select>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Search ..." />
<table class="order-table" id="myTable">
  <thead>
    <tr class="header">
      <th>Category</th>
      <th>Name</th>
      <th>Last Name</th>
      <th>Phone</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr id="one">
      <td>1</td>
      <td>Taylor</td>
      <td>Swift</td>
      <td>1234 5678</td>
      <td>taytay@gmail.com</td>
    </tr>
    <tr  id="two">
      <td>2, 3</td>
      <td>John</td>
      <td>Smith</td>
      <td>1234 5678</td>
      <td>johnnyboy@gmail.com</td>
    </tr>
    <tr id='three'>
      <td>3</td>
      <td>Jane</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>dohnut@gmail.com</td>
    </tr>
    <tr  id='four'>
      <td>3, 4</td>
      <td>Taylor</td>
      <td>Doh</td>
      <td>1234 5678</td>
      <td>td@gmail.com</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 19 февраля 2020

Это можно сделать с помощью селектора содержимого.

HTML 

<select type="search" class="select-table-filter" data-table="order-table" id="searchInput">
   <option value="">All</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<input type="search" class="light-table-filter" data-table="order-table" placeholder="Search ..." />
<table class="order-table" id="myTable">
<thead>
 <tr class="header">
  <th>Category</th>
  <th>Name</th>
  <th>Last Name</th>
  <th>Phone</th>
  <th>Email</th>
</tr>
</thead>
<tbody>
<tr>
  <td class="td">1</td>
  <td>Taylor</td>
  <td>Swift</td>
  <td>1234 5678</td>
  <td>taytay@gmail.com</td>
</tr>
<tr>
  <td class="td">2, 3</td>
  <td>John</td>
  <td>Smith</td>
  <td>1234 5678</td>
  <td>johnnyboy@gmail.com</td>
</tr>
<tr>
  <td class="td">3</td>
  <td>Jane</td>
  <td>Doh</td>
  <td>1234 5678</td>
  <td>dohnut@gmail.com</td>
</tr>
<tr>
  <td class="td">3, 4</td>
  <td>Taylor</td>
  <td>Doh</td>
  <td>1234 5678</td>
  <td>td@gmail.com</td>
</tr>
</tbody>
</table>

JQUERY

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

$('#searchInput').on('change',function(){
    let val=$(this).val();
    $( ".td" ).css( "font-weight", "400" );
    $( ".td:contains('"+val+"') " ).css( "font-weight", "800" );
});
...