<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filterable Table</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .filter-row input {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="container my-4">
    <h2 class="text-center">Filterable Table</h2>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
            <tr class="filter-row">
                <th><input type="text" class="form-control" id="nameFilter" placeholder="Search Name"></th>
                <th><input type="text" class="form-control" id="ageFilter" placeholder="Search Age"></th>
                <th><input type="text" class="form-control" id="countryFilter" placeholder="Search Country"></th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <tr>
                <td>John Doe</td>
                <td>25</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>30</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Maria Garcia</td>
                <td>28</td>
                <td>Mexico</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const nameFilter = document.getElementById('nameFilter');
        const ageFilter = document.getElementById('ageFilter');
        const countryFilter = document.getElementById('countryFilter');
        const tableBody = document.getElementById('tableBody');

        function filterTable() {
            const nameValue = nameFilter.value.toLowerCase();
            const ageValue = ageFilter.value;
            const countryValue = countryFilter.value.toLowerCase();

            for (const row of tableBody.rows) {
                const nameText = row.cells[0].textContent.toLowerCase();
                const ageText = row.cells[1].textContent;
                const countryText = row.cells[2].textContent.toLowerCase();

                row.style.display = 
                    (nameText.includes(nameValue) && ageText.includes(ageValue) && countryText.includes(countryValue)) 
                    ? '' 
                    : 'none';
            }
        }

        nameFilter.addEventListener('input', filterTable);
        ageFilter.addEventListener('input', filterTable);
        countryFilter.addEventListener('input', filterTable);
    });
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
