Using table cell value for javascript not <td class>

Question

I have following table test data which is filtered using checkboxes. I want the <script> to use the value in each <td> and not the <td class> in order to show/hide rows based on the checkbox selections.

Is this possible by amending my current script in a simple way? it would make it a lot easier using the data I have to simple use the values rather than having to manually change the class as I add rows?

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").parent().hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
  $("#fee :checkbox").click(function() {
    $("td").parent().hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t1" id="t1" />Fixed
  <br>
  <input type="checkbox" name="type" value="t2" id="t2" />Variable
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />Tracker
  <br>
  <input type="checkbox" name="type" value="t4" id="t4" checked/>All
  <br>
</section>

<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f1" id="f1" />Fee
  <br>
  <input type="checkbox" name="fee" value="f2" id="f2" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" checked/>All
  <br>
</section>

<br>

<div id="mortgagediv">
  <table id="mortgagetable">
    <tr class="productheader">
      <th class="lender">Lender</th>
      <th class="type">Type</th>
      <th class="inititalmths">Initital Term (mths)</th>
      <th class="inititalrate">Initial Rate (%)</th>
      <th class="svr">SVR (%)</th>
      <th class="apr">Overall APR (%)</th>
      <th class="fee">Fee (£)</th>
      <th class="ltv">LTV (%)</th>
      <th class="minamount">Min Amount (£)</th>
      <th class="maxamount">Max Amount (£)</th>
      <th class="repayment">Monthly Repayment (£)</th>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t1 t4">Fixed</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.64</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f1 f3"></td>
      <td class="tg-031e">70</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t2 t4">Variable</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.69</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f1 f3"></td>
      <td class="tg-031e">75</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t3 t4">Tracker</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.79</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f1 f3"></td>
      <td class="tg-031e">80</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t1 t4">Fixed</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.64</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f2 f3"></td>
      <td class="tg-031e">70</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t2 t4">Variable</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.69</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f2 f3"></td>
      <td class="tg-031e">75</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
    <tr class="product">
      <td class="tg-031e">Nationwide</td>
      <td class="t3 t4">Tracker</td>
      <td class="tg-031e">24</td>
      <td class="tg-031e">1.79</td>
      <td class="tg-031e">3.99</td>
      <td class="tg-031e">3.40</td>
      <td class="f2 f3"></td>
      <td class="tg-031e">80</td>
      <td class="tg-031e">5,000</td>
      <td class="tg-031e">20,000</td>
      <td class="tg-031e"></td>
    </tr>
  </table>
</div>

Any help would be much appreciated, thanks :)

educampver · Accepted Answer · 2015-09-24 16:05:59Z

2

I believe the best way is to use data-* attributes: just add data-value="the value" or whatever you want to call it. To fix your JS code simply change this

$("." + $(this).val()).parent().show();

by this

$("[data-type='" + $(this).val() + '"').parent().show();

The other way would be to use :contains, here you can find how to use it. The problem with this solution is that it matches substrings, which could not be the desired behavior and can lead to incorrect results.

edited Sep 24, 2015 at 16:05

answered Sep 24, 2015 at 15:37

educampver

3,0052 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

J. Ayo Over a year ago

do I need to add the data-value="the value" to each <td> tag? Sorry if I have misunderstood? I have changed the .js, but it is not working now?

educampver Over a year ago

yes you should, you could just replace class by data-value. if the value you're setting in the data-value attributes is the inner text of your <td>, remember to also update the values of your checkboxes.

J. Ayo Over a year ago

I don't really see the benefit of this. Is the script not just using the data-value="the value" and still not the actual cell contents?

educampver Over a year ago

If you actually need to use the actual contents of the cells as a filter (which I don't think is good at all) you could use what I suggested in the last paragraph of my answer, which is the :contains filter from jQuery. The problem with that, again, is that it matches substrings which can lead to unexpected behavior. IMHO you shouldn't use the values of the cells, I'd go with data-* attributes, which are meant for that purpose: add additional data to the DOM elements.

Collectives™ on Stack Overflow

Using table cell value for javascript not <td class>

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related