HTML表格插入JSON数据无法正确分列的问题求助

数据老陈

2026-8-20

问题分析与解决

你的代码逻辑错误导致表格结构混乱：

先循环data.key，每个元素都生成<tr><td>${element}</td>，这会创建3个未闭合的<tr>标签
再循环data.values，每个元素生成<td>${element}</td></tr>，相当于给前面的<tr>错位补闭合标签，最终HTML结构完全混乱，所有内容挤在第一列。

修正方案

需要将key和values数组的对应元素配对，每一对生成完整的表格行：

修正后的代码

var idtabla = document.getElementById("idtabla")
idtabla.innerHTML += window.location.href.split("/tabla/")[1]

function getJson(){
  var id = window.location.href.split("/tabla/")[1]
  var table = document.getElementById("table")
  $.get( `/json`, (data) => {
    if(data.error){
      idtabla.innerHTML = "404, tabla no encontrada"
    } else {
      // 先确保两个数组长度一致，避免数据错位
      if(data.key.length !== data.values.length){
        idtabla.innerHTML = "数据不匹配：key与values长度不一致"
        return
      }
      
      let tableHtml = ''
      // 循环配对key和values的对应元素，生成完整行
      for(let i = 0; i < data.key.length; i++){
        tableHtml += `<tr><td>${data.key[i]}</td><td>${data.values[i]}</td></tr>`
      }
      // 一次性插入DOM，减少重绘次数
      table.innerHTML = tableHtml
    }
  })
}

关键改动说明

配对循环：通过for循环同时获取data.key[i]和data.values[i]，每次生成包含两个单元格的完整<tr>行，保证列对应关系
预拼接HTML：先把所有行的HTML字符串拼接完成，再一次性赋值给table.innerHTML，比多次修改DOM更高效，也避免中间状态的结构错误
数据校验：增加数组长度一致性判断，提前处理数据不匹配的异常情况