正文

轻松掌握JS表格数据添加技巧，告别手动录入烦恼

/0 浏览量
0319

在Web开发中，表格是展示数据的一种常见方式。然而，手动录入表格数据不仅效率低下，而且容易出错。本文将介绍几种使用JavaScript轻松向表格添加数据的技巧，帮助开发者告别手动录入的烦恼。

1. 使用JavaScript原生方法添加数据

JavaScript原生方法提供了简单的方式来向表格添加数据。以下是一个使用innerHTML向表格添加行的示例：

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

<button onclick="addRow()">添加一行</button>

<script>
  function addRow() {
    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 = "张三";
    cell2.innerHTML = "30";
    cell3.innerHTML = "程序员";
  }
</script>

2. 使用jQuery简化操作

如果你熟悉jQuery，可以使用它提供的简洁方法来添加表格数据。以下是一个使用jQuery向表格添加行的示例：

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

<button id="addRowBtn">添加一行</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#addRowBtn").click(function() {
      $("#myTable tbody").append("<tr><td>李四</td><td>25</td><td>设计师</td></tr>");
    });
  });
</script>

3. 使用模板引擎

如果你正在使用现代前端框架（如React、Vue或Angular），可以使用模板引擎来简化表格数据的添加。以下是一个使用Vue.js向表格添加行的示例：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.job }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addRow">添加一行</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      rows: [
        { id: 1, name: '张三', age: 30, job: '程序员' }
      ]
    },
    methods: {
      addRow() {
        const newRow = {
          id: this.rows.length + 1,
          name: '李四',
          age: 25,
          job: '设计师'
        };
        this.rows.push(newRow);
      }
    }
  });
</script>

4. 使用AJAX从服务器获取数据

在实际应用中，表格数据往往来源于服务器。使用AJAX可以异步地从服务器获取数据并添加到表格中。以下是一个使用AJAX从服务器获取数据并添加到表格的示例：

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

<button id="loadDataBtn">加载数据</button>

<script>
  document.getElementById("loadDataBtn").addEventListener("click", function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "path/to/your/api", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        var table = document.getElementById("myTable").getElementsByTagName("tbody")[0];
        data.forEach(function(item) {
          var newRow = table.insertRow(table.rows.length);
          var cell1 = newRow.insertCell(0);
          var cell2 = newRow.insertCell(1);
          var cell3 = newRow.insertCell(2);
          cell1.innerHTML = item.name;
          cell2.innerHTML = item.age;
          cell3.innerHTML = item.job;
        });
      }
    };
    xhr.send();
  });
</script>

通过以上几种方法，你可以轻松地将数据添加到表格中，提高开发效率并减少错误。希望本文能帮助你告别手动录入的烦恼。

-- 展开阅读全文 --