How to show/hide columns using jquery based on dropdown list when using a dynamic table?

Question

I have a dynamic table to calculate price and I want a dropdown list to toggle between hours and rate and price and quantity.

My code works as expected the issue is when I add a row to the table all columns are displayed for a spilt second before the one that should be hidden, gets hidden. I want whatever the user selected to just display when adding a new row.

Javascript

<script>
    $(window).ready(function () {
        type();
    });
    function type() {
        var type = $("#typeSelect option:selected").val();
        if (type === "Hours") {
            $('.quantitySelect').hide();
            $('.hoursSelect').show();
        } else {
            $('.quantitySelect').show();
            $('.hoursSelect').hide();
        }
    }
</script>

HTML

<select class="form-control ml-4" style="width:auto;float:left" id="typeSelect" asp-for="OrderItemType">
  <option value="Hours">Hours</option>
  <option value="Quantity">Quantity</option>
</select>


<table class="table-bordered add_new_field">
<thead>
    <tr>
        <th>Item Name</th>
        <th class="hoursSelect">Hours</th>
        <th class="hoursSelect">Rate</th>
        <th class="quantitySelect">Price</th>
        <th class="quantitySelect">Quantity</th>
        <th class="discountSelect colm" data-col="column1">Discount</th>
        <th class="taxSelectt">Tax</th>
        <th style="text-align:right; padding-right: 10px">Amount</th>
    </tr>
</thead>
......

gaetanoM · Accepted Answer · 2020-09-22 18:46:41Z

You need to add a change event handler on select and use the :nth-child() selector in order to toggle visibility for the columns of your interest:

$('#typeSelect').on('change', function(e) {
    var val = $("#typeSelect option:selected").val();
    if (val == 'Quantity') {
        $('table.table-bordered tr :nth-child(4), table.table-bordered tr :nth-child(5)').show();
        $('table.table-bordered tr :nth-child(2), table.table-bordered tr :nth-child(3)').hide();
    } else {
        $('table.table-bordered tr :nth-child(4), table.table-bordered tr :nth-child(5)').hide();
        $('table.table-bordered tr :nth-child(2), table.table-bordered tr :nth-child(3)').show();
    }
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select class="form-control ml-4" style="width:auto;float:left" id="typeSelect" asp-for="OrderItemType">
    <option value="Hours">Hours</option>
    <option value="Quantity">Quantity</option>
</select>


<table class="table-bordered add_new_field">
    <thead>
    <tr>
        <th>Item Name</th>
        <th class="hoursSelect">Hours</th>
        <th class="hoursSelect">Rate</th>
        <th class="quantitySelect">Price</th>
        <th class="quantitySelect">Quantity</th>
        <th class="discountSelect colm" data-col="column1">Discount</th>
        <th class="taxSelectt">Tax</th>
        <th style="text-align:right; padding-right: 10px">Amount</th>
    </tr>
    </thead>
        <tr>
            <td>1</td>
            <td>1s</td>
            <td>1s</td>
            <td>1q</td>
            <td>1q</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    <tbody>
    </tbody>
</table>

Thanks, it works perfectly had to learn about the selector you suggested and I learn something new today. Thanks

Collectives™ on Stack Overflow

How to show/hide columns using jquery based on dropdown list when using a dynamic table?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related