javascript - JQuery table filter - AND condition

Question

I have a very large table I want to filter with more than 5000 rows

the table has 5 columns

hitting the FILTER button top right transforms the headers into input fields

that works ... well partially ... with this code I found on the web:

/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
V1.3 By Prakhar Srivastava
*/
function checkval() {
    1 == $("tbody tr:visible").length && "No result found" == $("tbody tr:visible td").html() ? $("#rowcount").html("0") : $("#rowcount").html($("tr:visible").length - 1)
}
$(document).ready(function() {
    $("#rowcount").html($(".filterable tr").length - 1), $(".filterable .btn-filter").click(function() {
        var t = $(this).parents(".filterable"),
            e = t.find(".filters input"),
            l = t.find(".table tbody");
        1 == e.prop("disabled") ? (e.prop("disabled", !1), e.first().focus()) : (e.val("").prop("disabled", !0), l.find(".no-result").remove(), l.find("tr").show()), $("#rowcount").html($(".filterable tr").length - 1)
    }), $(".filterable .filters input").keyup(function(t) {
        if ("9" != (t.keyCode || t.which)) {
            var e = $(this),
                l = e.val().toLowerCase(),
                n = e.parents(".filterable"),
                i = n.find(".filters th").index(e.parents("th")),
                r = n.find(".table"),
                o = r.find("tbody tr"),
                d = o.filter(function() {
                    return -1 === $(this).find("td").eq(i).text().toLowerCase().indexOf(l)
                });
            r.find("tbody .no-result").remove(), o.show(), d.hide(), d.length === o.length && r.find("tbody").prepend($('<tr class="no-result text-center"><td colspan="' + r.find(".filters th").length + '">Keine Ergebnisse gefunden.</td></tr>'))
        }
        $("#rowcount").html($("tr:visible").length - 1), checkval()
    })
});

the html looks like this

<div class="filterable">
    <p>Anzahl Bilder: <span id="rowcount"></span></p>
    <button class="btn btn-default btn-filter"><i class=""></i>FILTER</button>
    <div class="table-responsive">
      <table class="table table-bordered nobottommargin">
        <thead>
        <tr class="filters">
            <th><input type="text" class="form-control" placeholder="Name" disabled></th>
            <th><input type="text" class="form-control" placeholder="Gr??e" disabled></th>
            <th><input type="text" class="form-control" placeholder="Wochentag" disabled></th>
            <th><input type="text" class="form-control" placeholder="Datum" disabled></th>
            <th><input type="text" class="form-control" placeholder="Uhrzeit" disabled></th>
        </tr>                       
        </thead>  
        <tbody>
                <tr class="data">
                  <td>
                    <a href="bilder/Bild_20210102-235000.jpg" target="blank">Bild_20210102-235000.jpg</a>
                  </td>
                  <td style="text-align:right;">
                    81 kb
                  </td>
                  <td style="text-align:right;">
                    Samstag 
                  </td>
                  <td>
                    02.01.2021
                  </td>
                  <td>
                    23:50:03
                  </td>
                </tr>
        </tbody>
      </table>
    </div>
</div>

it filters the table by the last filter entered and than the whole list gets the filter of the last column-filter applied/changed. but I cannot figure out how to include an AND condition for at least the columns 2-5, so that only rows are shown, that match ALL filter values entered/applied.

question from:https://stackoverflow.com/questions/65546463/jquery-table-filter-and-condition

Answer 1

Waitting for answers