JS dropdown filter with tables

user_19219855 0
Viewed 34

I've found dropdown filter for html tables for 2 different options, but i need 4 options, so Ive upgraded it, added 2 more options and copypasted js code which was for option 1 and 2 and created for option 3 and 4 same code, but it doesn't work now, Where is the problem ?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#ddlType,#ddlPrice,#ddlAmount,#ddlStar").on("change", function () {
            var type = $('#ddlType').find("option:selected").val();
            var price = $('#ddlPrice').find("option:selected").val();
            var amount = $('#ddlAmount').find("option:selected").val();
            var star = $('#ddlStar').find("option:selected").val();
            SearchData(type, price, amount, star)
        });
    });
    function SearchData(type, price, amount, star) {
        if (type.toUpperCase() == 'ALL' && price.toUpperCase() == 'ALL' && amount.toUpperCase() == 'ALL' && star.toUpperCase() == 'ALL') {
            $('#table11 tbody tr').show();
        } else {
            $('#table11 tbody tr:has(td)').each(function () {
                var rowType = $.trim($(this).find('td:eq(1)').text());
                var rowPrice = $.trim($(this).find('td:eq(3)').text());
                var rowAmount = $.trim($(this).find('td:eq(4)').text());
                var rowStar = $.trim($(this).find('td:eq(5)').text());
                if (type.toUpperCase() != 'ALL' && price.toUpperCase() != 'ALL' && amount.toUpperCase() != 'ALL' 
                && star.toUpperCase() != 'ALL') {
                    if (rowType.toUpperCase() == type.toUpperCase()  && rowPrice == price && rowAmount == amount 
                    && rowStar == star) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '' 
                || $(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {
                    if (type != 'all') {
                        if (rowType.toUpperCase() == type.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (price != 'all') {
                        if (rowPrice == price) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                    if (amount != 'all') {
                        if (rowAmount == amount) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (star != 'all') {
                        if (rowStar == star) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                }
 
            });
        }
    }
</script>

<select class="cl_type" id="ddlType">
    <option value="all">Select option </option>
    <option value="Rest">Rest</option>
    <option value="Excursion">Excursion</option>
    <option value="Shoping">Shoping</option>
</select>

<select class="cl_price" id="ddlPrice">
    <option value="all">Select option </option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="3000">3000</option>
</select>

<select class="cl_amount" id="ddlAmount">
  <option value="all">Select option </option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="cl_star" id="ddlStar">
  <option value="all">Select option </option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Price</th>
        <th>Amount of persons</th>
        <th>Type of hotel</th>
    </tr>
    <tr>
        <td>REST</td>
        <td>Description</td>
        <td>500</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
      <td>REST</td>
      <td>Description</td>
      <td>3000</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>1000</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>1000</td>
      <td>4</td>
      <td></td>
    
    </tr>
</table>

Im bad at js, so can you please show where is mistake. Found this code here: code

html jquery javascript
1 Answers

The logic you have applied assumes that you only have an "ALL" and another option. To differentiate between different options, you need to implement a different logic. For this purpose I created a local variable called show and we have a logic that translates as follows:

If it matches the type, price, amount and star criteria, then we show it.

Matching a criteria is computed by checking whether it looks good so far (show is still true) and the criteria is either all or the row's corresponding cell matches the given text.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#ddlType,#ddlPrice,#ddlAmount,#ddlStar").on("change", function () {
            var type = $('#ddlType').find("option:selected").val();
            var price = $('#ddlPrice').find("option:selected").val();
            var amount = $('#ddlAmount').find("option:selected").val();
            var star = $('#ddlStar').find("option:selected").val();
            SearchData(type, price, amount, star)
        });
    });
    function SearchData(type, price, amount, star) {
        for (let row of document.querySelectorAll('table tr')) {
            let tds = row.querySelectorAll('td');
            if (!tds.length) continue;
            let show = true;
            show = show && ((type === "all") || (tds[0].innerText.toLowerCase() === type.toLowerCase()));
            show = show && ((price === "all") || (tds[2].innerText.toLowerCase() === price.toLowerCase()));
            show = show && ((amount === "all") || (tds[3].innerText.toLowerCase() === amount.toLowerCase()));
            show = show && ((star === "all") || (tds[4].innerText.toLowerCase() === star.toLowerCase()));
            $(row)[show ? "show" : "hide"]();
        }
    }
</script>

<select class="cl_type" id="ddlType">
    <option value="all">Select option </option>
    <option value="Rest">Rest</option>
    <option value="Excursion">Excursion</option>
    <option value="Shoping">Shoping</option>
</select>

<select class="cl_price" id="ddlPrice">
    <option value="all">Select option </option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="3000">3000</option>
</select>

<select class="cl_amount" id="ddlAmount">
  <option value="all">Select option </option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="cl_star" id="ddlStar">
  <option value="all">Select option </option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Price</th>
        <th>Amount of persons</th>
        <th>Type of hotel</th>
    </tr>
    <tr>
        <td>REST</td>
        <td>Description</td>
        <td>500</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
      <td>REST</td>
      <td>Description</td>
      <td>3000</td>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>SHOPING</td>
      <td>Description</td>
      <td>1000</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>500</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>EXCURSION</td>
      <td>Description</td>
      <td>1000</td>
      <td>4</td>
      <td></td>
    
    </tr>
</table>

user_4365600
Related