JSFiddle - React, Tailwind, and code Playground

by burktelefon

HTML

<input id="Button1" type="button" value="button" onclick="searchTable();" />
<input id="searchdata" type="text" />
<div id="ListContainer"></div>

CSS

td, th {
    border: thin solid;
}
.hideThis {
    display: none;
}

JavaScript

window.onload = function () {
    addList();
}

function searchTable(inputVal) {
    var inputVal = document.getElementById('searchdata').value;
    if (inputVal == "") {
        $('.hideThis').removeClass('hideThis');
    } else {
        $('tr').addClass('hideThis');
        $('tr:has(td:contains(' + inputVal + '))').removeClass('hideThis');
    }
}

function addList() {

    var table = "";
    table += "<table class='table'>";
    table += "<tr>";
    table += "<th>S.no</td>";
    table += "<th>Name</td>";
    table += "<th>Gender</td>";

    table += "</tr>";
    for (i = 0; i < 10; i++) {
        table += "<tr>";
        table += "<td>" + i + "</td>";
        table += "<td>Name" + i + "</td>";
        table += "<td>" + (i > 5 ? "Male" : "Female") + "</td>";
        table += "</tr>";
    }
    table += "</table>";
    var body = document.getElementById("ListContainer");
    body.innerHTML = table;
}