正文

轻松学会JS制作表格：从基础到动态交互，一招掌握！

/0 浏览量
0329

引言

JavaScript（JS）是一种广泛使用的编程语言，常用于网页开发中的前端部分。其中，表格是网页中常见的一种数据展示方式。本文将带领您从JavaScript制作表格的基础开始，逐步深入到动态交互的制作，让您轻松掌握JS制作表格的技巧。

一、JavaScript制作表格的基础

1. 创建表格

要使用JavaScript创建表格，首先需要了解HTML表格的基本结构。以下是一个简单的HTML表格示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

2. 使用JavaScript操作表格

在HTML中引入JavaScript代码，我们可以通过JavaScript操作表格。以下是一个示例，演示如何使用JavaScript为表格添加一行数据：

// 获取表格元素
var table = document.getElementById("myTable");

// 创建新的表格行和单元格
var newRow = table.insertRow(-1);
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
var newCell3 = newRow.insertCell(2);

// 设置单元格内容
newCell1.innerHTML = "王五";
newCell2.innerHTML = "28";
newCell3.innerHTML = "产品经理";

二、JavaScript动态交互

1. 表格排序

表格排序是表格交互中常见的功能。以下是一个使用JavaScript实现表格按年龄排序的示例：

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[1];
      y = rows[i + 1].getElementsByTagName("TD")[1];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

2. 表格搜索

表格搜索功能可以让用户在表格中查找特定数据。以下是一个简单的表格搜索示例：

function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}

三、总结

通过本文的学习，您应该已经掌握了JavaScript制作表格的基础知识和动态交互技巧。在实际开发中，您可以结合这些知识，制作出功能丰富、美观大方的表格。祝您在网页开发的道路上越走越远！

-- 展开阅读全文 --