根据下拉选择显示或隐藏表格行

时间：2017-04-14 10:43:45

标签： jquery

我有一个表格，下面有一个扇区列。

在更改扇区列时，使用下拉列表我需要显示/隐藏与该扇区相对应的行

这是我的代码

HTML代码 

<table class="table table-striped marg_none tablesorter tablesorter-blackice" id="myTable" role="grid">

   <tbody id="positivebody" aria-live="polite" aria-relevant="all">
      <tr class="greencolor" role="row">
         <td class="text-center">
            <label for="IBREALEST" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="greencolor">JUBLFOOD</td>
         <td>99.15</td>
         <td>108.25</td>
         <td>CNX FMCG</td>
      </tr>
      <tr class="greencolor" role="row">
         <td class="text-center">
            <label for="DEN" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="greencolor">TCS</td>
         <td>90</td>
         <td>103.4</td>
         <td>CNX IT</td>
      </tr>
      <tr class="redcolor" role="row">
         <td class="text-center">
            <label for="RAYMOND" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="redcolor">INFY</td>
         <td>631.7</td>
         <td>654</td>
         <td>CNX IT</td>
      </tr>

   </tbody>
</table>

<select id="sectors">
<option value="None">-- Select --</option>
<option value="CNX IT">CNX IT</option>
<option value="CNX FMCG">CNX FMCG</option>
</select>

关于下拉更改 

$(document).ready(function(){
     $("#sectors").change(function(){
        var textselected =  document.getElementById("sectors").value ;
                                var tr = $('#myTable tbody tr');
                                tr.hide();
                                tr.filter(function()
                                {
                                        return +$('td:eq(3)', this).text();
                                }).show();

     });
   });

这是我的小提琴

http://jsfiddle.net/cod7ceho/480/

2 个答案:

答案 0 :(得分：0)

这是解决方案。这是你想要完成的吗？

HTML代码 

    <table class="table table-striped marg_none tablesorter tablesorter-blackice" id="myTable" role="grid">
   <thead>
      <tr role="row" class="tablesorter-headerRow">
         <th data-sorter="true" width="1%" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label=": No sort applied, activate to apply an ascending sort" style="user-select: none;">
            <div class="tablesorter-header-inner"></div>
         </th>
         <th data-sorter="true" width="9.8%" data-column="1" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort" style="user-select: none;">
            <div class="tablesorter-header-inner">Name </div>
         </th>

         <th data-sorter="true" width="6%" data-column="8" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Low: No sort applied, activate to apply an ascending sort" style="user-select: none;">
            <div class="tablesorter-header-inner">Low</div>
         </th>
         <th data-sorter="true" width="6%" data-column="9" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="High: No sort applied, activate to apply an ascending sort" style="user-select: none;">
            <div class="tablesorter-header-inner">High</div>
         </th>
         <th data-sorter="true" width="6%" data-column="10" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" aria-controls="myTable" unselectable="on" aria-sort="none" aria-label="Sector: No sort applied, activate to apply an ascending sort" style="user-select: none;">
            <div class="tablesorter-header-inner">Sector</div>
         </th>
      </tr>
   </thead>
   <tbody id="positivebody" aria-live="polite" aria-relevant="all">
      <tr class="greencolor" role="row">
         <td class="text-center">
            <label for="IBREALEST" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="greencolor choice two">JUBLFOOD</td>
         <td class="choice two">99.15</td>`
         <td class="choice two">108.25</td>
         <td class="choice two">CNX FMCG</td>
      </tr>
      <tr class="greencolor" role="row">
         <td class="text-center">
            <label for="DEN" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="greencolor choice one">TCS</td>
         <td class="choice one">90</td>
         <td class="choice one">103.4</td>
         <td class="choice one">CNX IT</td>
      </tr>
      <tr class="redcolor" role="row">
         <td class="text-center">
            <label for="RAYMOND" class="marg_none">
               <div></div>
            </label>
         </td>
         <td class="redcolor choice one">INFY</td>
         <td class="choice one">631.7</td>
         <td class="choice one">654</td>
         <td class="choice one">CNX IT</td>
      </tr>

   </tbody>
</table>

<select id="sectors">
<option value="None">-- Select --</option>
<option value="one">CNX IT</option>
<option value="two" >CNX FMCG</option>
</select>

关于下拉更改 

$(document).ready(function(){
     $("#sectors").change(function(){
        var textselected =  document.getElementById("sectors").value ;
            target = '.' + textselected;
         $('.choice').hide();
        $(target).show();

     });
   });

http://jsfiddle.net/ryotakise/qkggtg3f/

答案 1 :(得分：0)

基于选择选项

更改行的简单和静态示例 
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Jquery Show Table Rows Based on Dropdown Selection</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <select id="choice">
  <option value="all">All</option>
  <option value="serviceOne">Board-Certified Lactation Consultants</option>
  <option value="serviceTwo">Breastfeeding Classes</option>
  <option value="serviceThree">Breastfeeding-Friendly Environments</option>

  <option value="serviceFour">Certified Lactation Counselors</option>
  <option value="serviceFive">Counselor, Consultant, or Leader</option>
  <option value="serviceSix">Extended Lactation</option>

  <option value="serviceSeven">Home Visits</option>

  <option value="serviceEight">Milk Bank Drop-Off</option>
  <option value="serviceNine">Peer Support</option>
  <option value="serviceTen">Phone Support</option>

  <option value="serviceEleven">Postpartum Breastfeeding Care</option>
  <option value="serviceTwelve">Prenatal Education</option>

</select>

<table id="table">
  <thead>
    <tr>
      <th>Provider</th>
      <th>Phone</th>
      <th>Address</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
      <tr class="all serviceEleven">
        <td><a href="http://www.saludclinic.org/" target="_blank">Salud Family Health Center</a></td>
      <td>970-484-0999</td>
      <td>220 E. Rogers Rd.</td>
        <td>Longmont</td>
    </tr>
        </tr>
      <tr class="all serviceEleven">
        <td><a href="https://clinica.org/" target="_blank">Clinica Family Health Center</a></td>
      <td>303-650-4460</td>
      <td>1345 Plaza Court N.</td>
        <td>Lafayette</td>
    </tr>
      <tr class="all serviceEleven">
        <td><a href="https://clinica.org/" target="_blank">People's Medical Clinic</a></td>
      <td>303-650-4460</td>
      <td>2525 13th St.</td>
        <td>Boulder</td>
    </tr>
      <tr class="all serviceEleven serviceTwo serviceTen serviceOne serviceFour serviceEight serviceFive serviceNine serviceTen">
        <td><a href="http://www.bch.org/" target="_blank">Boulder Community Health</a></td>
      <td>720-854-7000</td>
      <td>4747 Arapahoe Ave.</td>
        <td>Boulder</td>
    </tr>
   <tr class="all serviceTwelve serviceTwo serviceEleven serviceOne serviceFour serviceEight serviceFive serviceNine serviceTen serviceSix">
     <td><a href="http://www.avistahospital.org/avh/home/" target="_blank">Avista Hospital</a></td>
     <td>303-673-1000</td>
     <td>100 Health Park Dr.</td>
     <td>Louisville</td>
</tr>
<tr class="all serviceTwelve serviceEleven serviceOne serviceFour serviceEight serviceFive serviceTen">
  <td><a href="http://www.goodsamaritancolorado.org/" target="_blank">Good Samaritan Medical Center</a></td>
  <td>303-689-4000</td>
  <td>200 Exempla Cr.</td>
  <td>Lafayette</td>
</tr>
<tr class="all serviceTwelve serviceTwo serviceEleven serviceFour serviceFive serviceNine serviceTen">
  <td><a href="http://www.luhcares.org/" target="_blank">Longmont United Hospital</a></td>
  <td>303-651-5111</td>
  <td>1950 Mountain View Ave.</td>
  <td>Longmont</td>
</tr>
<tr class="all serviceTwo serviceEleven serviceOne serviceFour serviceFive serviceNine">
  <td><a href="http://www.birthcenterofboulder.com/" target="blank">Birth Center of Boulder</a></td>
  <td>303-443-3993</td>
  <td>2800 Folsom St.</td>
  <td>Boulder</td>
</tr>
<tr class="all serviceTwelve serviceOne serviceFour serviceFive serviceNine serviceTen serviceSix">
  <td><a href="http://www.bouldercounty.org/family/pregnancy/pages/wicindex.aspx" target="_blank">WIC Program</a></td>
  <td>303-413-7500</td>
  <td>3482 Broadway</td>
  <td>Boulder</td>
</tr>
<tr class="all serviceOne serviceSeven">
  <td><a href="http://www.bouldercounty.org/family/pregnancy/pages/genesisservices.aspx" target="_blank">GENESIS Program</a></td>
  <td>303-413-7500</td>
  <td>3482 Broadway</td>
  <td>Boulder</td>
  <tr>
 <tr class="all serviceTwelve serviceTwo serviceFour serviceFive serviceNine serviceThree">
   <td><a href="http://family-garden.org/" target="_blank">Family Garden Parenting Resource Center</a></td>
   <td>303-678-1144</td>
   <td>600 S. Airport Rd., Ste. B</td>
   <td>Longmont</td>
</tr>
<tr class="all serviceTwelve serviceTwo serviceOne serviceFive serviceNine serviceSix serviceThree">
  <td><a href="http://www.themamahood.com/" target="_blank">Mama'hood</a></td>
  <td>303-443-3832</td>
  <td>2525 Arapahoe Ave., Ste. H-7</td>
  <td>Boulder</td>
</tr>
<tr class="all serviceFive serviceNine serviceTen serviceSix serviceThree">
  <td>Boulder La Leche League</td>
  <td>720-514-9607</td>
  <td>lllofboulder@gmail.com</td>
  <td>Boulder</td>
</tr>
<tr class="all serviceThree">
  <td><a href="http://www.bouldercounty.org/family/pregnancy/pages/chp.aspx" target="_blank">Child Health Promotion Program</a></td>
<td>303-413-7500</td>
<td>3482 Broadway</td>
<td>Boulder</td>
</tr>
<tr class="all serviceSeven">
  <td><a href="http://www.bouldercounty.org/family/pregnancy/pages/csnprogram.aspx" target="_blank">Children with Special Needs</a></td>
  <td>303-413-7500</td>
  <td>3482 Broadway</td>
  <td>Boulder</td>
</tr>
<tr class="all serviceFive serviceNine serviceTen serviceSix serviceThree">
<td><a href="http://www.longmontlll.org/Longmont_LLL/Home.html" target="_blank">Longmont La Leche League</a></td>
  <td>303-772-9312</td>
  <td>No Address</td>
  <td>Longmont</td>
</tr>
<tr class="all serviceSeven">
  <td><a href="http://www.bouldercounty.org/family/pregnancy/pages/nfpindex.aspx" target="_blank">Nurse-Family Partnership</a></td>
  <td>303-413-7500</td>
  <td>3482 Broadway</td>
  <td>Boulder</td>
</tr>
</tbody>
</table>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.bouldercounty.org/_layouts/bccustom/scripts/jquery.tablesorter.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
相关问题
最新问题