0

我试图让我的一些专栏跨越可读性以及模式识别。我还在更改单元格的背景颜色以显示模式。如果我的数组中的数据为空，我使用红色。如果它不为空且至少跨越 2 列，则为蓝色，否则为灰色。我发现我的某些列比应有的要宽，有些则更短。对于我的数据，第一列是唯一太宽的，最后一列是唯一太短的。然而，据我所知，它们的颜色是正确的。我可以提供示例代码，但不能提供示例数据，因为它是高度机密的。我可以给出代码，并且会。为什么我的一些专栏比我预期的更宽，而另一些则比我预期的要短？

function loadTable() {
    var fields = JSON.parse(localStorage.getItem("boxFields"));
    var report = JSON.parse(localStorage.getItem("boxReport"));
    var space = document.getElementById("batchReport");
    var baseList = document.createElement("ul");
    space.appendChild(baseList);
    for (var i = 0; i < fields.length; i++) {
        var li = document.createElement("li");
        baseList.appendChild(li);
        var header = document.createElement("h2");
        header.textContent = fields[i] + ":";
        li.appendChild(header);
        if (report.length > 0) {
            var table = document.createElement("table");
            table.className += "wide";
            li.appendChild(table);
            var tr = document.createElement("tr");
            table.appendChild(tr);
            var td = document.createElement("td");
            td.colSpan = report.length;
            tr.appendChild(td);
            tr = document.createElement("tr");
            table.appendChild(tr);
            var compare = "NeverEqual";
            var count = 0;
            td = null;
            for (var j = 0; j < report.length; j++) {
                if (compare == report[j][i]) {
                    count++;
                    td.colSpan = count;
                    if (compare != null)
                        td.style.backgroundColor = "#336";
                } else {
                    count = 1;
                    compare = report[j][i];
                    td = document.createElement("td");
                    tr.appendChild(td);
                    td.textContent = report[j][i];
                    //td.colSpan = 1;
                    if (compare != null)
                        td.style.backgroundColor = "#333";
                    else {
                        td.style.backgroundColor = "#633";
                    }
                }
            }
        }
    }
    space.style.height = "93%";
    space.style.overflow = "auto";
}
4

1 回答 1

1

您没有为表格单元格指定明确的宽度，因此它们将根据其内容和浏览器/IE 所做的后备逻辑自动计算。如果您想让一个单元格具有特定宽度，请对其应用一个类或将其设置为具有明确的属性，例如：

td.style.width = "50px";

或者

td.className = "myCell";
// and in css somewhere define the class
.myCell{
  width: 50px;
}
于 2013-02-26T22:06:44.677 回答