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实现各种列表效果，从基础渲染到交互功能、动态操作和数据处理。根据具体需求，可以组合或扩展这些方法来实现更复杂的列表功能。