0

読みやすさとパターン認識のために、列の一部をスパンにしようとしています。また、セルの背景色を変更してパターンを表示しています。配列内のデータが 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";
}
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 に答える