正文

如何用jQuery将表单数据一键转换成表格展示？

/0 浏览量
0518

在Web开发中，将表单数据转换成表格展示是一种常见的需求。这不仅能够提高用户体验，还能使数据更加直观和易于管理。使用jQuery来实现这一功能，可以大大简化开发过程。下面，我将详细讲解如何使用jQuery将表单数据一键转换成表格展示。

准备工作

在开始之前，请确保您的项目中已经引入了jQuery库。以下是一个简单的HTML结构，用于演示如何将表单数据转换成表格：

<form id="myForm">
  <input type="text" name="name" placeholder="姓名">
  <input type="text" name="age" placeholder="年龄">
  <input type="text" name="city" placeholder="城市">
  <button type="button" id="submitBtn">提交</button>
</form>

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

实现步骤

  1. 监听表单提交事件

首先，我们需要监听表单的提交事件。当用户点击提交按钮时，触发一个事件处理函数。

$('#submitBtn').on('click', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  var formData = $('#myForm').serializeArray(); // 获取表单数据
  // ...接下来，我们将使用这些数据来创建表格
});
  1. 创建表格行

接下来，我们需要遍历表单数据，并为每条数据创建一个表格行。

var rows = '';
formData.forEach(function(item) {
  rows += '<tr>';
  rows += '<td>' + item.value + '</td>';
  rows += '</tr>';
});
  1. 将数据添加到表格中

最后，我们将创建的行添加到表格的<tbody>中。

$('#dataTable tbody').html(rows);

完整代码

将以上步骤整合起来，我们得到以下完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单数据转表格展示</title>
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="name" placeholder="姓名">
    <input type="text" name="age" placeholder="年龄">
    <input type="text" name="city" placeholder="城市">
    <button type="button" id="submitBtn">提交</button>
  </form>

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

  <script>
    $('#submitBtn').on('click', function(e) {
      e.preventDefault();
      var formData = $('#myForm').serializeArray();
      var rows = '';
      formData.forEach(function(item) {
        rows += '<tr>';
        rows += '<td>' + item.value + '</td>';
        rows += '</tr>';
      });
      $('#dataTable tbody').html(rows);
    });
  </script>
</body>
</html>

通过以上步骤，您就可以使用jQuery将表单数据一键转换成表格展示。在实际项目中，您可以根据需要修改代码，以适应不同的需求。

-- 展开阅读全文 --