Question

我正在努力使我的一些列跨越可读性以及模式识别。我也在改变细胞的背景颜色以显示图案。如果我的数组中的数据为null，我使用红色。如果它不为null并且跨越至少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";
}

Answer 1

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

td.style.width = "50px";

或

td.className = "myCell";
// and in css somewhere define the class
.myCell{
  width: 50px;
}

麻烦Javascript表colspan

1 个答案: