js实现列表效果
实现基础列表渲染
使用JavaScript动态渲染列表数据到HTML页面。假设有一个数组数据需要展示为无序列表：
const items = ['Apple', 'Banana', 'Orange'];
const listContainer = document.getElementById('list-container');
function renderList(items) {
const ul = document.createElement('ul');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
listContainer.appendChild(ul);
}
renderList(items);HTML部分需要有一个容器元素：
<div id="list-container"></div>添加交互功能
为列表项添加点击事件处理，实现选中效果：
function renderInteractiveList(items) {
const ul = document.createElement('ul');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
li.addEventListener('click', function() {
this.classList.toggle('selected');
});
ul.appendChild(li);
});
listContainer.innerHTML = '';
listContainer.appendChild(ul);
}CSS样式：
.selected {
background-color: #f0f0f0;
font-weight: bold;
}实现动态列表操作
添加表单输入和按钮，支持动态添加列表项：
const addButton = document.getElementById('add-item');
const newItemInput = document.getElementById('new-item');
addButton.addEventListener('click', function() {
const newItem = newItemInput.value.trim();
if(newItem) {
items.push(newItem);
renderInteractiveList(items);
newItemInput.value = '';
}
});HTML部分：
<input type="text" id="new-item" placeholder="Enter new item">
<button id="add-item">Add Item</button>
<div id="list-container"></div>使用模板引擎
对于复杂列表结构，可以使用模板字符串或模板引擎：
function renderListWithTemplate(items) {
const html = items.map(item => `
<li class="list-item">
<span>${item.name}</span>
<span class="price">$${item.price}</span>
</li>
`).join('');
listContainer.innerHTML = `<ul>${html}</ul>`;
}
const products = [
{ name: 'Laptop', price: 999 },
{ name: 'Phone', price: 699 },
{ name: 'Tablet', price: 399 }
];
renderListWithTemplate(products);实现排序和过滤
为列表添加排序和过滤功能：
function sortList(order = 'asc') {
const sortedItems = [...items].sort((a, b) => {
return order === 'asc'
? a.localeCompare(b)
: b.localeCompare(a);
});
renderInteractiveList(sortedItems);
}
function filterList(searchTerm) {
const filteredItems = items.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
renderInteractiveList(filteredItems);
}HTML部分添加控制元素：
<input type="text" id="search" placeholder="Search items">
<button onclick="sortList('asc')">Sort A-Z</button>
<button onclick="sortList('desc')">Sort Z-A</button>
<div id="list-container"></div>这些方法展示了如何使用JavaScript实现各种列表效果，从基础渲染到交互功能、动态操作和数据处理。根据具体需求，可以组合或扩展这些方法来实现更复杂的列表功能。
