正文

轻松掌握JS控制表格：从添加删除到排序筛选，一招搞定表格操作难题

/0 浏览量
0412

在网页开发中，表格是展示数据的一种常见方式。JavaScript（JS）作为一种强大的前端脚本语言，能够帮助我们轻松地控制表格，实现数据的添加、删除、排序和筛选等功能。本文将带你一步步掌握这些技巧，让你能够轻松应对表格操作难题。

添加数据到表格

首先，我们需要一个基本的HTML表格结构。以下是一个简单的表格示例：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

接下来，我们可以使用JavaScript来添加数据到表格中。以下是一个示例代码：

function addData(name, age, city) {
  var table = document.getElementById("myTable").getElementsByTagName("tbody")[0];
  var newRow = table.insertRow(table.rows.length);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  cell1.innerHTML = name;
  cell2.innerHTML = age;
  cell3.innerHTML = city;
}

// 调用函数添加数据
addData("张三", 25, "北京");
addData("李四", 30, "上海");

删除表格数据

删除表格数据同样简单。以下是一个示例代码，演示如何删除指定行：

function deleteRow(rowIndex) {
  var table = document.getElementById("myTable");
  table.deleteRow(rowIndex);
}

// 删除第二行数据
deleteRow(1);

排序表格

为了方便用户查看数据，我们可以对表格进行排序。以下是一个示例代码，演示如何根据年龄列进行排序：

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

// 调用函数按年龄列排序
sortTable(1);

筛选表格数据

筛选表格数据可以帮助用户快速找到他们感兴趣的信息。以下是一个示例代码，演示如何根据城市列筛选数据：

function filterTable() {
  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")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

// 添加筛选输入框
var input = document.createElement("input");
input.type = "text";
input.id = "myInput";
input.placeholder = "搜索城市...";
document.getElementById("myTable").appendChild(input);

// 为筛选输入框添加事件监听器
document.getElementById("myInput").addEventListener("keyup", filterTable);

通过以上示例，我们可以看到，使用JavaScript控制表格并不复杂。只需掌握一些基本的方法和技巧，你就可以轻松实现数据的添加、删除、排序和筛选等功能。希望这篇文章能帮助你解决表格操作难题，让你在网页开发中更加得心应手。

-- 展开阅读全文 --