JSFiddle - React, Tailwind, and code Playground

by bobbyrne01

HTML

<input id="filterBy" type="text" />
<table id="tracks">
    <tr>
        <td>1</td>
        <td>John</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Mark</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Sean</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Kieron</td>
    </tr>
</table>

JavaScript

function filterBy() {

    for (var l = 0; l < document.getElementById('tracks').rows.length; l++) {

        document.getElementById('tracks').rows[l].style.display = 'table-row';
    }

    for (var l = 0; l < document.getElementById('tracks').rows.length; l++) {
        if (document.getElementById('tracks').rows[l].cells[1].textContent.toLowerCase().indexOf(document.getElementById('filterBy').value.toLowerCase()) < 0) {

            document.getElementById('tracks').rows[l].style.display = 'none';
        }
    }
}

document.getElementById('filterBy').onkeyup = function (event) {
    filterBy();
};