Show Hide HTML Table Column based on DropDownList selected value using jQuery

Last Reply 16 days ago By dharmendr

Posted 17 days ago

i would like to filter a table input in the column of type when i choose interger or decimal in the column of type the following columns should appear Name label unit and the part of category should automatically be non categorical and when I choose the other others in the column of type all columns should appear apart from the unit column.

<div class="row">
    <table class="table table-bordered table-striped table-highlight">
        <thead>
            <th>Type*</th>
            <th>Name*</th>
            <th>Label*</th>
            <th>Unit*</th>
            <th>Category*</th>
            <th>List_name*</th>
            <th>Variable_name*</th>
            <th>choice_label*</th>
            <th>&nbsp;</th>
        </thead>
        <tbody>
            <form id="variable"action="#filter" >
                <tr>
                    <td>
                        <select id="type" name="type" class="form-control">
                            <option>integer</option>
                            <option>decimal</option>
                            <option>text</option>
                            <option>select_one</option>
                            <option>select_multiple</option>
                            <option>barcode</option>
                            <option>image</option>
                            <option>date</option>
                            <option>string</option>
                            <option>geo_point</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" id="name" name="name" class="form-control" value="" />
                    </td>
                    <td>
                        <input type="text" id="label"name="label" class="form-control" value="" />
                    </td>
                    <td>
                        <select id="unit"name="unit"class="form-control">
                            <option>cm</option>
                            <option>cm2</option>
                            <option>cm3</option>
                            <option>mm</option>
                            <option>mm2</option>
                            <option>mm3</option>
                            <option>m</option>
                            <option>m2</option>
                            <option>m3</option>
                            <option>area</option>
                            <option>ha</option>
                            <option>acre</option>
                        </select>
                    </td>
                    <td>
                        <select id="category" name="category" class="form-control">
                            <option>Categorical</option>
                            <option>non_categorical</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" id="list_name" name="list" class="form-control" value="" />
                    </td>
                    <td>
                        <input type="text" id="variable_name" name="variable"class="form-control" value="" />
                    </td>
                    <td>
                        <input type="text"id="choice_list"name="choice" class="form-control" value="" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-secondary btn-block" onclick="addVariable()">Add</button>
                    </td>
                </tr>
            </form>
        </tbody>
    </table>
</div>

 

Posted 16 days ago Modified on 16 days ago

Hi ArnoldDol,

Refer below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script>
        $(function () {
            $("#type").on("change", function () {
                var type = $('#type').find("option:selected").val();
                if (type.toUpperCase() == 'INTEGER' || type.toUpperCase() == 'DECIMAL') {
                    $('#tblTypes').find('th:nth-child(1)').show();
                    $('#tblTypes').find('th:nth-child(2)').show();
                    $('#tblTypes').find('th:nth-child(3)').show();
                    $('#tblTypes').find('th:nth-child(4)').show();
                    $('#tblTypes').find('th:nth-child(5)').show();
                    $('#tblTypes').find('th:nth-child(6)').hide();
                    $('#tblTypes').find('th:nth-child(7)').hide();
                    $('#tblTypes').find('th:nth-child(8)').hide();
                    $('#tblTypes').find('th:nth-child(9)').show();

                    $('#tblTypes').find('td:nth-child(1)').show();
                    $('#tblTypes').find('td:nth-child(2)').show();
                    $('#tblTypes').find('td:nth-child(3)').show();
                    $('#tblTypes').find('td:nth-child(4)').show();
                    $('#tblTypes').find('td:nth-child(5)').show();
                    $('#tblTypes').find('td:nth-child(6)').hide();
                    $('#tblTypes').find('td:nth-child(7)').hide();
                    $('#tblTypes').find('td:nth-child(8)').hide();
                    $('#tblTypes').find('td:nth-child(9)').show();
                    $("#category").val('non_categorical');
                } else {
                    $('#tblTypes').find('th:nth-child(1)').show();
                    $('#tblTypes').find('th:nth-child(2)').show();
                    $('#tblTypes').find('th:nth-child(3)').show();
                    $('#tblTypes').find('th:nth-child(4)').hide();
                    $('#tblTypes').find('th:nth-child(5)').show();
                    $('#tblTypes').find('th:nth-child(6)').show();
                    $('#tblTypes').find('th:nth-child(7)').show();
                    $('#tblTypes').find('th:nth-child(8)').show();
                    $('#tblTypes').find('th:nth-child(9)').show();

                    $('#tblTypes').find('td:nth-child(1)').show();
                    $('#tblTypes').find('td:nth-child(2)').show();
                    $('#tblTypes').find('td:nth-child(3)').show();
                    $('#tblTypes').find('td:nth-child(4)').hide();
                    $('#tblTypes').find('td:nth-child(5)').show();
                    $('#tblTypes').find('td:nth-child(6)').show();
                    $('#tblTypes').find('td:nth-child(7)').show();
                    $('#tblTypes').find('td:nth-child(8)').show();
                    $('#tblTypes').find('td:nth-child(9)').show();
                    $("#category").val('Categorical');
                }
            });
        }); 
    </script>
    <div class="container-fluid">
        <div class="row">
            <table class="table table-bordered table-striped table-highlight" id="tblTypes">
                <thead>
                    <th>
                        Type*
                    </th>
                    <th>
                        Name*
                    </th>
                    <th>
                        Label*
                    </th>
                    <th>
                        Unit*
                    </th>
                    <th>
                        Category*
                    </th>
                    <th>
                        List_name*
                    </th>
                    <th>
                        Variable_name*
                    </th>
                    <th>
                        choice_label*
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <select id="type" name="type" class="form-control">
                                <option>integer</option>
                                <option>decimal</option>
                                <option>text</option>
                                <option>select_one</option>
                                <option>select_multiple</option>
                                <option>barcode</option>
                                <option>image</option>
                                <option>date</option>
                                <option>string</option>
                                <option>geo_point</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" id="name" name="name" class="form-control" value="" />
                        </td>
                        <td>
                            <input type="text" id="label" name="label" class="form-control" value="" />
                        </td>
                        <td>
                            <select id="unit" name="unit" class="form-control">
                                <option>cm</option>
                                <option>cm2</option>
                                <option>cm3</option>
                                <option>mm</option>
                                <option>mm2</option>
                                <option>mm3</option>
                                <option>m</option>
                                <option>m2</option>
                                <option>m3</option>
                                <option>area</option>
                                <option>ha</option>
                                <option>acre</option>
                            </select>
                        </td>
                        <td>
                            <select id="category" name="category" class="form-control">
                                <option>Categorical</option>
                                <option>non_categorical</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" id="list_name" name="list" class="form-control" value="" />
                        </td>
                        <td>
                            <input type="text" id="variable_name" name="variable" class="form-control" value="" />
                        </td>
                        <td>
                            <input type="text" id="choice_list" name="choice" class="form-control" value="" />
                        </td>
                        <td>
                            <button type="button" class="btn btn-secondary btn-block" onclick="addVariable()">
                                Add</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Demo