当前位置：首页 > 行业动态 > 正文

html行填充数据库

admin
行业动态
2025-04-25
2116

解析HTML表格结构，遍历标签获取行数据，提取内容映射数据库字段，使用参数化SQL或ORM框架逐条插入，注意字符转义与事务控制

需求分析

将HTML表格中的数据行提取并填充到数据库,需解决以下问题：

数据提取：从HTML表格中获取行数据
数据映射：将表格列与数据库字段对应
数据传输：通过前端或后端传递数据
数据库操作：将数据插入目标表

实现步骤

HTML表格结构示例

<table id="dataTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

数据提取与映射

表格列索引	字段名	数据类型	说明
0	id	INT	主键，自增
1	name	VARCHAR(50)	用户名
2	age	INT	年龄（需校验范围）

前端数据提取（JavaScript示例）

// 获取表格行数据
const rows = document.querySelectorAll('#dataTable tbody tr');
const data = Array.from(rows).map(row => {
  const cells = row.querySelectorAll('td');
  return {
    id: parseInt(cells[0].innerText),
    name: cells[1].innerText,
    age: parseInt(cells[2].innerText)
  };
});

数据传输方式

方式	说明
表单提交	`<form>` 包裹表格，通过 `method=POST` 提交至后端接口
AJAX请求	使用 `fetch` 或 `axios` 发送 JSON 数据至 API（推荐）
文件导入	导出表格为 CSV/Excel 文件，通过后端解析入库（适用批量操作）

后端接收与数据库插入（以Node.js为例）

// Express路由处理POST请求
app.post('/api/insertData', async (req, res) => {
  const data = req.body; // 假设接收JSON数组
  try {
    // 使用参数化查询防止SQL注入
    const query = 'INSERT INTO users (id, name, age) VALUES ?';
    await pool.query(query, data.map(item => [item.id, item.name, item.age]));
    res.status(200).send('成功插入');
  } catch (error) {
    console.error(error);
    res.status(500).send('插入失败');
  }
});