JS如何操作DOM基于表格动态展示数据

操作DOM基于表格动态展示数据是Web开发中常用的技术。JavaScript是DOM操作的主力军。下面是操作DOM基于表格动态展示数据的完整攻略：

1. 数据渲染

在JavaScript中，可以通过插值表达式、DOM操作等方式将数据渲染到HTML页面。下面我们将介绍两个渲染数据的示例。

1.1 使用innerHTML渲染表格

使用innerHTML属性，可以将一个字符串插入到指定DOM元素中。我们可以根据数据动态生成HTML字符串，并使用innerHTML属性把字符串插入到表格的tbody中，从而渲染表格。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="table-data">

  </tbody>
</table>

<script>
  // 数据
  const data = [
    { name: 'Alice', age: 20, email: 'alice@example.com' },
    { name: 'Bob', age: 30, email: 'bob@example.com' },
    { name: 'Charlie', age: 40, email: 'charlie@example.com' }
  ];

  // 渲染表格
  const tableDataEl = document.getElementById('table-data');
  let tableHtml = '';
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    tableHtml += `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.email}</td>
      </tr>
    `;
  }
  tableDataEl.innerHTML = tableHtml;
</script>

上面代码中，使用innerHTML属性将tableHtml插入到tbody元素中，从而渲染出表格。

1.2 使用DocumentFragment渲染表格

将HTML字符串插入到innerHTML属性的缺点在于，会导致页面进行重排和重绘，性能不佳。我们可以使用DocumentFragment对象来避免这种性能问题。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="table-data">

  </tbody>
</table>

<script>
  // 数据
  const data = [
    { name: 'Alice', age: 20, email: 'alice@example.com' },
    { name: 'Bob', age: 30, email: 'bob@example.com' },
    { name: 'Charlie', age: 40, email: 'charlie@example.com' }
  ];

  // 渲染表格
  const tableDataEl = document.getElementById('table-data');
  const tableFragment = document.createDocumentFragment();
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const tr = document.createElement('tr');
    const nameTd = document.createElement('td');
    nameTd.textContent = item.name;
    const ageTd = document.createElement('td');
    ageTd.textContent = item.age;
    const emailTd = document.createElement('td');
    emailTd.textContent = item.email;
    tr.appendChild(nameTd);
    tr.appendChild(ageTd);
    tr.appendChild(emailTd);
    tableFragment.appendChild(tr);
  }
  tableDataEl.appendChild(tableFragment);
</script>

上面代码中，使用document.createFragment()创建了一个DocumentFragment对象。然后，使用document.createElement()创建了tr和td元素，使用textContent属性设置文本内容，最后将tr和td元素依次添加到DocumentFragment中，然后通过tableDataEl.appendChild()方法将DocumentFragment插入到table中。

2. 数据更新

当数据发生变化时，我们需要根据最新的数据更新表格。下面我们将介绍两个数据更新的示例。

2.1 直接更新innerHTML

与渲染时使用innerHTML一样，当数据更新时，我们也可以再次使用innerHTML来更新表格。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="table-data">

  </tbody>
</table>

<script>
  // 数据
  let data = [
    { name: 'Alice', age: 20, email: 'alice@example.com' },
    { name: 'Bob', age: 30, email: 'bob@example.com' },
    { name: 'Charlie', age: 40, email: 'charlie@example.com' }
  ];

  // 渲染表格
  const tableDataEl = document.getElementById('table-data');
  let tableHtml = '';
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    tableHtml += `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.email}</td>
      </tr>
    `;
  }
  tableDataEl.innerHTML = tableHtml;

  // 更新数据
  setTimeout(() => {
    data[0].name = 'Alex';
    data[1].age = 35;
    data[2].email = 'charlie234@example.com';
    tableHtml = '';
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      tableHtml += `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.email}</td>
        </tr>
      `;
    }
    tableDataEl.innerHTML = tableHtml;
  }, 3000);
</script>

上面代码中，当数据发生变化时，我们再次使用innerHTML将最新的HTML内容插入到tbody元素中，实现了数据更新的效果。

2.2 只更新发生变化的那些项

当数据发生变化时，只更新发生变化的那些项，可以减少DOM操作的数量，提高性能。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="table-data">

  </tbody>
</table>

<script>
  // 数据
  let data = [
    { name: 'Alice', age: 20, email: 'alice@example.com' },
    { name: 'Bob', age: 30, email: 'bob@example.com' },
    { name: 'Charlie', age: 40, email: 'charlie@example.com' }
  ];

  // 渲染表格
  const tableDataEl = document.getElementById('table-data');
  let tableHtml = '';
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    tableHtml += `
      <tr>
        <td data-key="name">${item.name}</td>
        <td data-key="age">${item.age}</td>
        <td data-key="email">${item.email}</td>
      </tr>
    `;
  }
  tableDataEl.innerHTML = tableHtml;

  // 更新数据
  setTimeout(() => {
    data[0].name = 'Alex';
    data[1].age = 35;
    data[2].email = 'charlie234@example.com';

    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      const tr = tableDataEl.children[i];
      for (let j = 0; j < tr.children.length; j++) {
        const td = tr.children[j];
        const key = td.dataset.key;
        if (item[key] !== td.textContent) {
          td.textContent = item[key];
        }
      }
    }
  }, 3000);
</script>

上面代码中，当数据发生变化时，我们首先给每个td元素添加了data-key属性，表示该元素对应的数据项。然后，我们遍历每个数据项和每个td元素，如果数据项和td元素中对应的值不一样，就更新td元素的textContent属性，实现了数据更新的效果。

以上就是JavaScript如何操作DOM基于表格动态展示数据的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS如何操作DOM基于表格动态展示数据 - Python技术站