如何为HTML表格的td元素依次设置不同背景图片？

不用修改创建文本节点的代码，直接给<td>元素设置background-image样式即可。具体实现如下：

1. 根据单元格的索引匹配对应图片：你有13张图片，表格一行共16个单元格，前13个单元格可对应img1.gif到img13.gif，剩余3个单元格可选择重复使用图片或不设置。
2. 通过cell.style.backgroundImage为单元格绑定背景图，注意确保图片路径正确（示例假设图片与当前页面在同一目录）。

修改后的完整代码：

function options ()
{
    const tbl = document.createElement("table");
    const tblBody = document.createElement("tbody");

    for (let i = 0; i < 1; i++) {
        const row = document.createElement("tr");
        for (let j = 0; j < 16; j++) {
            const cell = document.createElement("td");
            const cellText = document.createTextNode(2);
            cell.appendChild(cellText);
            
            // 为单元格设置背景图片
            if (j < 13) {
                // 前13个单元格对应img1到img13.gif
                cell.style.backgroundImage = `url('img${j+1}.gif')`;
            } else {
                // 剩余单元格可选择重复使用图片（比如复用第一张），或注释此行不设置
                // cell.style.backgroundImage = `url('img1.gif')`;
            }
            
            // 可选：优化背景图显示效果
            cell.style.backgroundSize = "cover";
            cell.style.backgroundPosition = "center";
            
            row.appendChild(cell);
        }
        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    document.body.appendChild(tbl);
}

补充说明： #

• 若想让16个单元格循环使用13张图片，可替换成以下逻辑：

  const imgIndex = (j % 13) + 1;
  cell.style.backgroundImage = `url('img${imgIndex}.gif')`;
  

• backgroundSize和backgroundPosition用于避免图片拉伸或错位，可根据需求调整。
• 若图片存放在子目录（如images/），需修改路径为url('images/img${j+1}.gif')。

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