How can the functionality of searching and hiding content in a table row be optimized for performance and efficiency?

The functionality of searching and hiding content in a table row can be optimized for performance and efficiency by utilizing client-side scripting languages like JavaScript. By implementing a search function that filters the table rows based on user input, unnecessary DOM manipulations can be avoided, resulting in faster response times. Additionally, using CSS to hide rows that do not match the search criteria can improve performance by reducing the amount of content rendered on the page. 

<?php
// PHP code for generating a table with data
$data = [
    ['John Doe', 'john.doe@example.com', 'New York'],
    ['Jane Smith', 'jane.smith@example.com', 'Los Angeles'],
    ['Alice Johnson', 'alice.johnson@example.com', 'Chicago'],
    ['Bob Brown', 'bob.brown@example.com', 'Houston'],
];

echo '<table id="myTable">';
echo '<tr><th>Name</th><th>Email</th><th>Location</th></tr>';
foreach ($data as $row) {
    echo '<tr><td>' . $row[0] . '</td><td>' . $row[1] . '</td><td>' . $row[2] . '</td></tr>';
}
echo '</table>';
?>

<script>
// JavaScript code for searching and hiding table rows
document.getElementById('myInput').addEventListener('input', function() {
    var filter = this.value.toUpperCase();
    var table = document.getElementById('myTable');
    var rows = table.getElementsByTagName('tr');

    for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName('td');
        var found = false;

        for (var j = 0; j < cells.length; j++) {
            var cell = cells[j];
            if (cell) {
                var textValue = cell.textContent || cell.innerText;
                if (textValue.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                    break;
                }
            }
        }

        rows[i].style.display = found ? '' : 'none';
    }
});
</script>

Keywords

PHP table row search functionality content hiding performance optimization

Related Questions