Question

Cum filtrez un tabel HTML cu ajutorul funcțiilor JavaScript. Eu reușesc doar pentru o coloană, dar am 3 coloane. Folosesc următorul script:

function NUMAR() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

Answer 1

<script>
function NUMAR() {
    var input, filter, table, tr, td, i;
    
    // Textul din input
    input = document.getElementById("myInput").value.toLowerCase();
    
    // Lista cu fiecare rand din 
    tr = document.getElementById("myTable").getElementsByTagName("tr");
    
    for (i = 0; i < tr.length; i++) {
        // Toate celulele din randul curent (1-3)
        tds = tr[i].getElementsByTagName("td");
        
        // Presupunem ca nu se afiseaza
        var display = false;
        
        // Daca textul de filtru este 0, se afiseaza oricum
        if(input.length == 0) display = true; 
        
        // Daca nu avem niciun td, se afiseaza oricum (titlul tabelului <th> va fi exceptat, de ex.)
        if(tds.length == 0) display = true; 
        
        // Pentru fiecare celula din tds
        for(var td of tds){
            // Daca inputul se afla in ea, se afiseaza
            if (td.innerHTML.toLowerCase().indexOf(input) > -1) {
                display = true;
            }
        }
        
        if(display){
            tr[i].style.display = "";
        }else{
            tr[i].style.display = "none";
        }
    }
}
</script>

<input id="myInput" oninput="NUMAR()"><br>

<table id="myTable">
<tr>
    <th>Nr.</th>
    <th>Nume</th>
    <th>Clasa</th>
</tr>
<tr>
    <td>1</td>
    <td>Andrei</td>
    <td>5</td>
</tr>
<tr>
    <td>2</td>
    <td>Alexandru Ioan</td>
    <td>7</td>
</tr>
<tr>
    <td>3</td>
    <td>Vasile Alexandri</td>
    <td>12</td>
</tr>
<tr>
    <td>4</td>
    <td>Marcelin</td>
    <td>11</td>
</tr>
</table>