-1

有没有办法根据您在 html 选择选项下拉列表中选择的选项，使用 Javascript 将样式附加到现有类？

例如，在下表中，当从选项框中选择该数字时，我希望相应的数字变为粗体或突出显示。

非常感谢！

<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>

4

2 回答 2

0

您可以使用包含选择器来做到这一点。

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>

查询

<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" );
});
于 2020-02-19T07:03:52.547 回答
0 

(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>

于 2020-02-19T07:23:50.470 回答