如何将for循环遍历DOM元素获取的商品状态结果追加到表格中？

嘿，这事儿不难，我帮你调整代码，轻松把商品状态数据整理成清晰的表格！下面分两种场景给你具体的实现方式：

场景1：完全用JS动态创建表格 #

如果页面上还没有表格元素，我们可以直接用JavaScript生成完整的表格并添加到页面中：

// 获取所有目标商品元素
let items = document.getElementsByClassName('class-name');

// 创建表格基础结构
const table = document.createElement('table');
table.border = '1'; // 给表格加边框，方便查看，可根据需求移除或自定义样式

// 创建表头
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
// 表头单元格
const productHeader = document.createElement('th');
productHeader.textContent = '商品';
const statusHeader = document.createElement('th');
statusHeader.textContent = '售出状态';
headerRow.append(productHeader, statusHeader);
thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表格主体区域
const tbody = document.createElement('tbody');

// 遍历商品元素，生成每一行数据
for (let i = 0; i < items.length; i++) {
    // 处理状态文本，去除多余空格并转换为友好表述
    const rawStatus = items[i].innerText.trim();
    const displayStatus = rawStatus === 'SOLD' ? '已售出' : '未售出';

    // 创建表格行
    const row = document.createElement('tr');

    // 商品单元格（这里用序号标识，你可以替换成商品名称等实际内容，比如从元素中获取商品名）
    const productCell = document.createElement('td');
    productCell.textContent = `商品 ${i + 1}`;
    row.appendChild(productCell);

    // 状态单元格，可添加样式区分状态
    const statusCell = document.createElement('td');
    statusCell.textContent = displayStatus;
    if (displayStatus === '已售出') {
        statusCell.style.color = '#dc3545'; // 红色强调已售出状态
        statusCell.style.fontWeight = 'bold';
    }
    row.appendChild(statusCell);

    tbody.appendChild(row);
}

table.appendChild(tbody);

// 将表格添加到页面中（这里优先添加到id为table-container的容器，没有则添加到body末尾）
const targetContainer = document.getElementById('table-container');
if (targetContainer) {
    targetContainer.appendChild(table);
} else {
    document.body.appendChild(table);
}

场景2：页面已有表格结构，只需追加数据 #

如果你的HTML页面已经提前写好了表格框架，比如这样：

<!-- 页面中的表格结构 -->
<table id="product-status-table" border="1" style="border-collapse: collapse;">
    <thead>
        <tr>
            <th>商品</th>
            <th>售出状态</th>
        </tr>
    </thead>
    <tbody id="status-table-body">
        <!-- 后续JS会在这里追加行 -->
    </tbody>
</table>

那对应的JS代码可以更简洁：

// 获取商品元素和表格主体
let items = document.getElementsByClassName('class-name');
const tbody = document.getElementById('status-table-body');

// 遍历生成行并追加到表格
for (let i = 0; i < items.length; i++) {
    const rawStatus = items[i].innerText.trim();
    const displayStatus = rawStatus === 'SOLD' ? '已售出' : '未售出';

    // 快速创建表格行（用innerHTML简化代码）
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>商品 ${i + 1}</td>
        <td style="${displayStatus === '已售出' ? 'color:#dc3545; font-weight:bold;' : ''}">${displayStatus}</td>
    `;
    tbody.appendChild(row);
}

小提示 #

• 如果你想显示商品的实际名称而不是“商品N”，可以根据商品元素的结构调整，比如如果每个商品元素里有个类名为product-name的元素，就用items[i].querySelector('.product-name').innerText来获取商品名。
• 表格样式可以通过CSS来优化，比如去掉border属性，用外部样式表来控制边框、间距等，让表格更美观。

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