使用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时出现问题

回答

相关问题