使用Javascript表colspan時出現問題

我正在嘗試使一些列的可讀性以及模式識別跨度。我也在改變單元格的背景顏色來顯示模式。如果我的數組中的數據爲空，則使用紅色。如果它不爲零並且跨越至少2列，則爲藍色，否則爲灰色。我發現我的一些專欄比他們應該更寬，有些更短。有了我的數據，第一列是唯一太寬的，而最後一列是唯一太短的。據我所知，但他們的顏色是正確的。我可以給出示例代碼，但不是示例數據，因爲它是高度機密的。我可以給代碼，並且會。爲什麼我的一些專欄較寬，而其他專欄比我預期的要短？使用Javascript表colspan時出現問題

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"; 
}

來源

2013-02-22 rickstockham

問題是什麼嗎？你已經描述了你在做什麼，但不是問題是什麼。還有一個原因，你使用的表被認爲是相當不贊成與MS網格佈局？ – 2013-02-25 14:39:10

編輯有一個明確的問題。至於ms-grid佈局，使用javascript的一個重要原因是跨平臺的。 WinRT/JS中的表格應該沒問題，因爲它聲稱與html5兼容。我甚至認爲，爲了這個目的，我只是在計算錯誤或某種東西，但是我忽略了它並要求額外的一組眼睛。謝謝你的想法。 – rickstockham 2013-02-26 00:11:45

你不指定的表格單元格的寬度明確所以他們會自動計算基於其內容和後備邏輯瀏覽器/ IE瀏覽器。如果你想有一個小區有一個特定的寬度或者適用一個類，或設置它的財產明確地，例如：

td.style.width = "50px";

或者

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

來源

2013-02-26 22:06:44

一個有趣的想法，但我認爲它忽略了給予足夠空間的想法，每列應具有相同的重量，而當一個單元格跨越多列時，「看起來」似乎應該獲得相應的權重。正如你也可能看到的，我的桌子被分爲「寬」，我用它來設置爲100％。設置單元格寬度將無法正確保存此行爲。我不打算將此標記爲正確的答案，但我會給它一個投票。 – rickstockham 2013-02-27 00:03:37

使用Javascript表colspan時出現問題

回答

相關問題