Идет поиск,
Сортировка по имени,
HTML-структура
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Data Table with Search and Sorting</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <input type="text" id="searchInput" placeholder="Search..."> <table id="dataTable"> <thead> <tr> <th data-sort="name">Name</th> <th data-sort="age">Age</th> <th data-sort="country">Country</th> </tr> </thead> <tbody></tbody> </table> </div> <script src="script.js"></script> </body> </html>
script.js
const data = [ { name: 'John', age: 28, country: 'USA' }, { name: 'Alice', age: 24, country: 'Canada' }, { name: 'Bob', age: 32, country: 'UK' }, // ... more data ]; const tableBody = document.querySelector('tbody'); const searchInput = document.getElementById('searchInput'); function renderTable(data) { tableBody.innerHTML = ''; data.forEach(item => { const row = document.createElement('tr'); row.innerHTML = `<td>${item.name}</td><td>${item.age}</td><td>${item.country}</td>`; tableBody.appendChild(row); }); } function searchAndRender(query) { const filteredData = data.filter(item => { return ( item.name.toLowerCase().includes(query) || item.country.toLowerCase().includes(query) ); }); renderTable(filteredData); } searchInput.addEventListener('input', event => { const query = event.target.value.toLowerCase(); searchAndRender(query); }); const thElements = document.querySelectorAll('th[data-sort]'); thElements.forEach(th => { th.addEventListener('click', () => { const sortBy = th.getAttribute('data-sort'); data.sort((a, b) => a[sortBy].localeCompare(b[sortBy])); renderTable(data); }); }); renderTable(data);
CSS
body { font-family: Arial, sans-serif; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } th { cursor: pointer; } th:hover { background-color: #f2f2f2; } tbody tr:hover { background-color: #f2f2f2; }
Спасибо за прочтение
- 👏 Пожалуйста, хлопайте в историю и подписывайтесь на меня 👉
- 📰 Посмотреть больше материалов на тему Javascript, DSA, React, Подготовка к интервью
- 🔔 Подпишитесь на меня: LinkedIn!
Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями