Untitled
unknown
plain_text
6 months ago
3.1 kB
1
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Employee Cart</title> <style> body { font-family: Arial, sans-serif; } #employeeTable { border-collapse: collapse; width: 100%; } #employeeTable th, #employeeTable td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } #employeeTable th { background-color: #f2f2f2; } #employeeTable img { height: 50px; width: auto; } #searchContainer { margin-bottom: 20px; } #searchInput, #searchButton { padding: 8px; font-size: 14px; } #searchButton { margin-left: 10px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="searchContainer"> <input type="text" id="searchInput" placeholder="Enter search term"> <button id="searchButton">Search</button> </div> <table id="employeeTable"> <thead> <tr> <th>Photo</th> <th>Name</th> <th>Username</th> <th>Email</th> <th>Phone</th> <th>Website</th> </tr> </thead> <tbody></tbody> </table> <script> $(document).ready(function() { var employeeData = []; // Variable to store the fetched employee data // Make AJAX request to fetch JSON data $.ajax({ url: 'https://jsonplaceholder.typicode.com/users', dataType: 'json', success: function(data) { employeeData = data; // Store the fetched data in the variable // Populate the table with employee data populateTable(employeeData); } }); // Search button click event handler $('#searchButton').click(function() { var searchTerm = $('#searchInput').val().trim().toLowerCase(); var filteredData = employeeData.filter(function(employee) { return ( employee.name.toLowerCase().includes(searchTerm) || employee.username.toLowerCase().includes(searchTerm) || employee.email.toLowerCase().includes(searchTerm) || employee.phone.toLowerCase().includes(searchTerm) || employee.website.toLowerCase().includes(searchTerm) ); }); // Clear the table body and populate with filtered data $('#employeeTable tbody').empty(); populateTable(filteredData); }); // Function to populate the table with employee data function populateTable(data) { $.each(data, function(index, employee) { var row = $('<tr>'); row.append($('<td>').html('<img src="https://via.placeholder.com/50" alt="Employee Photo">')); row.append($('<td>').text(employee.name)); row.append($('<td>').text(employee.username)); row.append($('<td>').text(employee.email)); row.append($('<td>').text(employee.phone)); row.append($('<td>').text(employee.website)); $('#employeeTable tbody').append(row); }); } }); </script> </body> </html>