JavaScript生成HTML表格时渲染JSON中URL对应图片的方法

当前createTable函数对所有单元格内容统一调用document.createTextNode()处理，该方法只会将传入值渲染为纯文本。你存入images数组的是ImageDOM对象，直接走文本渲染逻辑只会显示[object HTMLImageElement]字符串，无法正常展示图片。
另外你传入表格的数据源结构是[标题数组, 餐厅数组, 图片数组]，按行渲染会出现「第一行全是标题、第二行全是餐厅名、第三行全是图片」的错位布局，也需要一并调整。

• 调整单元格渲染逻辑，判断内容类型：DOM元素直接插入单元格，文本内容走文本节点渲染
• 重构数据遍历逻辑，按「单条数据一行」的常规表格格式组织内容
• 复用页面已存在的#table元素，避免重复生成表格

修复后的完整JS代码 #

// 存储接口返回的原始字符串
const list = "{{responseText|escapejs}}";
let titles = [], images = [], restaurants = [];

// 原有逐字符提取逻辑可正常运行，更推荐替换为JSON.parse直接解析，容错率更高
// const resData = JSON.parse(list);
// 后续直接从resData按字段名取值即可，无需手写循环逐字符匹配
for (var i = 0; i < list.length-8; i++) {
    if(list[i] == 't' && list[i+1] == 'ti') {
        var title = '';
        for(var j = (i+8); list[j] != ","; j++) title += list[j];
        i = j;
        titles.push(title)
    }
}
for (var i = 0; i < list.length-8; i++) {
    if(list[i] == 'h' && list[i+1] == 'ht') {
        var image = '';
        for(var j = (i); list[j] != ","; j++) image += list[j];
        i = j;
        var img = new Image();
        img.src = image.slice(0, -1);
        // 给图片设置固定尺寸，避免撑乱表格布局
        img.style.width = "100px";
        img.style.height = "100px";
        img.style.objectFit = "cover";
        images.push(img);
    }
}
for (var i = 0; i < list.length-17; i++) {
    if(list[i] == 'r' && list[i+1] == 'e' && list[i+2] == 'res') {
        var restaurant = '';
        for(var j = (i+17); list[j] != ","; j++) restaurant += list[j];
        i = j;
        restaurants.push(restaurant)
    }
}

function createTable() {
    const table = document.getElementById('table');
    const tableBody = document.createElement('tbody');

    // 插入表头行
    const headerRow = document.createElement('tr');
    ["标题", "所属餐厅", "配图"].forEach(text => {
        const th = document.createElement('th');
        th.textContent = text;
        headerRow.appendChild(th);
    })
    tableBody.appendChild(headerRow);

    // 按单条数据一行的规则渲染内容
    const dataLen = Math.max(titles.length, restaurants.length, images.length);
    for (let i = 0; i < dataLen; i++) {
        const row = document.createElement('tr');
        
        // 标题列
        const titleTd = document.createElement('td');
        titleTd.textContent = titles[i] || '-';
        row.appendChild(titleTd);

        // 餐厅名列
        const restTd = document.createElement('td');
        restTd.textContent = restaurants[i] || '-';
        row.appendChild(restTd);

        // 图片列
        const imgTd = document.createElement('td');
        if (images[i]) imgTd.appendChild(images[i]);
        else imgTd.textContent = '无图';
        row.appendChild(imgTd);

        tableBody.appendChild(row);
    }

    table.appendChild(tableBody);
}

// 直接调用渲染表格即可
createTable();

手写逐字符匹配JSON字符串的解析逻辑容错率极低，只要接口返回的字段内容里包含ti/ht/res这类字符就会解析失败，生产环境直接用JSON.parse()转换JSON字符串为JS对象后再取字段，稳定性会高很多。

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