HTML表格单元格过小且不显示数组数据问题求助

核心问题原因 #

• 文本节点未插入单元格：你创建了文本节点，但没有将其添加到对应的<td>元素中，导致单元格为空，因此显示极小且无内容。
• tbody获取方式不可靠：原HTML未显式编写<tbody>，浏览器会自动生成，但document.getElementsByTagName("tbody").item(0)的写法不如直接通过表格对象的tBodies[0]获取稳定。
• 单元格尺寸设置错误：直接给DOM元素的width/height属性赋值是设置HTML属性，优先级低于CSS，且不符合现代DOM操作规范，应通过style属性设置样式。
• 变量未声明引发全局污染：row、ProductCodeC等变量未用let/const声明，会成为全局变量，可能导致后续代码冲突。

修复后的代码 #

JavaScript

function addTableRow(ProductCode, ProductName, ProductTotal, Price, Offer, LCOffer){
    if (!document.getElementsByTagName){
        return;
    }
    const table = document.getElementById("inventoryTable");
    const x = table.rows.length;
    const tableBody = table.tBodies[0];
    const row = document.createElement("tr");
    row.id = x;

    const ProductCodeC = document.createElement("td");
    const ProductNameC = document.createElement("td");
    const ProductTotalC = document.createElement("td");
    const PriceC = document.createElement("td");
    const OfferC = document.createElement("td");
    const LCOfferC = document.createElement("td");

    // 用style设置单元格最小宽度，也可统一通过CSS控制
    ProductCodeC.style.minWidth = "120px";
    ProductNameC.style.minWidth = "150px";
    ProductTotalC.style.minWidth = "100px";
    PriceC.style.minWidth = "80px";
    OfferC.style.minWidth = "80px";
    LCOfferC.style.minWidth = "120px";

    const ProductCodeTNode = document.createTextNode(ProductCode);
    const ProductNameTNode = document.createTextNode(ProductName);
    const ProductTotalTNode = document.createTextNode(ProductTotal);
    const PriceTNode = document.createTextNode(Price);
    const OfferTNode = document.createTextNode(Offer);
    const LCOfferTNode = document.createTextNode(LCOffer);

    // 关键步骤：将文本节点添加到对应单元格
    ProductCodeC.appendChild(ProductCodeTNode);
    ProductNameC.appendChild(ProductNameTNode);
    ProductTotalC.appendChild(ProductTotalTNode);
    PriceC.appendChild(PriceTNode);
    OfferC.appendChild(OfferTNode);
    LCOfferC.appendChild(LCOfferTNode);

    row.appendChild(ProductCodeC);
    row.appendChild(ProductNameC);
    row.appendChild(ProductTotalC);
    row.appendChild(PriceC);
    row.appendChild(OfferC);
    row.appendChild(LCOfferC);

    tableBody.appendChild(row);
    console.log(ProductName);
    console.log(ProductTotal);
}

CSS

table, th, td {
    border: 2px solid #ccc; /* 将白色边框改为灰色，避免白色背景下无法识别 */
    border-collapse: collapse;
    color: black;
    padding: 8px 12px; /* 添加内边距，让内容与边框保持距离 */
}
.Inventory {
    width: 100%; /* 让表格占满容器宽度 */
}

HTML

<div>
    <table class="Inventory" id="inventoryTable">
        <!-- 显式添加tbody，消除浏览器自动生成的不确定性 -->
        <tbody>
            <tr>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Product Total</th>
                <th>Price</th>
                <th>Offer</th>
                <th>Loyalty card Offer</th>
            </tr>
        </tbody>
    </table>
</div>

额外说明 #

• 显式添加<tbody>可避免浏览器自动生成tbody带来的获取问题；
• 用CSS统一控制表格样式比在JS中逐个设置更易维护；
• 给单元格添加内边距能提升内容可读性，避免紧贴边框；
• 变量声明使用const（值不改变时）或let，避免全局变量污染。

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