如何用Javascript将HTML表格转带类型的二维数组并传递给Django表单复用

实现逻辑 #

• 分层遍历：先获取所有行元素，再遍历每行内的单元格，保证外层数组对应表格、内层数组对应行的嵌套结构
• 自动类型转换：对单元格文本做整数合法性校验，符合规则的转int类型，其余保留原始字符串类型

修正后的完整代码 #

function tableToArray() {
  // 外层数组，存储整个表格数据
  const tableArray = [];
  // 如需仅获取tbody内的行，可将选择器改为 .table tbody tr
  const trList = document.querySelectorAll(".table tr");

  trList.forEach(tr => {
    // 每行对应一个子数组
    const rowArray = [];
    // 获取当前行所有单元格
    const tdList = tr.querySelectorAll("td");
    
    tdList.forEach(td => {
      const text = td.innerText.trim();
      // 校验是否为合法整数（支持负整数）
      if (/^-?\d+$/.test(text)) {
        rowArray.push(parseInt(text, 10));
      } else {
        rowArray.push(text);
      }
    });

    // 过滤空行，不需要可删除该判断
    if (rowArray.length > 0) {
      tableArray.push(rowArray);
    }
  });

  console.log(tableArray);
  return tableArray;
}

// 调用方法即可得到目标二维数组
const myTableArray = tableToArray();

后续对接Django表单注意事项 #

如果要跨页面传递或者提交给Django后端：

• 前端先调用JSON.stringify(myTableArray)把二维数组转成JSON字符串
• 可以将字符串存入表单的隐藏input字段，提交表单时Django后端通过json.loads()即可解析得到原始数组结构
• 如果是异步提交，直接把JSON字符串放在请求体里传递即可

内容的提问来源于stack exchange，提问作者AWScloudguru