矩阵表的不恒定 IndexSizeError答案

【问题标题】：inconstant IndexSizeError with Matrix table矩阵表的不恒定 IndexSizeError
【发布时间】：2017-05-27 10:06:30
【问题描述】：

我试图在我的应用程序中复制this 解决方案，数据是从 MS SQL 数据库中提取的，如果时间在 ASC 中排序它工作正常，但如果在 DESC 基础中排序，我得到IndexSizeError 错误，我在 this 和 this 等其他问题中了解到此错误，但找不到答案。

以下是我的代码，感谢解决。谢谢

var tbody = document.querySelector('#completions').querySelector('tbody');
var headers = ['Date', 'FFS', 'SHF', 'SF', 'SCRP'];
var cache = {};
var date;
var completions = [
   {'Date':'11','FFS':'3,207'},{'Date':'11','SF':'1,501'},{'Date':'10','SHF':'603'},
   {'Date':'10','FFS':'4,643'},{'Date':'9','FFS':'2,352'},{'Date':'9','SHF':'603'},
   {'Date':'8','FFS':'4,008'},{'Date':'8','SF':'754'},{'Date':'7','FFS':'798'},
   {'Date':'6','FFS':'3,955'},{'Date':'6','SCRP':'503'},{'Date':'6','SF':'1,501'},
   {'Date':'6','SHF':'603'},{'Date':'5','FFS':'3,146'},{'Date':'5','SF':'1,503'},
   {'Date':'4','FFS':'5,375'},{'Date':'4','SF':'751'},{'Date':'4','SHF':'1,206'},
   {'Date':'3','FFS':'2,295'},{'Date':'3','SF':'752'},{'Date':'2','FFS':'6,300'},
   {'Date':'2','SF':'1,503'},{'Date':'1','FFS':'2,250'},{'Date':'1','SF':'1,506'},
   {'Date':'0','FFS':'2,236'}
,]; 
  
completions.forEach(function(completion, rIndex){
        date = completion['Date'];
        if (!cache[date]) {
        cache[date] = 'yes';
        var tr = tbody.insertRow(rIndex);
            tr.id = 'id'+date;
            headers.forEach(function(){ tr.insertCell(); })
            tbody.appendChild(tr);
        } 
        var row = tbody.querySelector('#id'+date).rowIndex - 1;
        headers.forEach(function(header,pIndex){
                if(completion[header]) 
                     tbody.rows[row].cells[pIndex].innerHTML = completion[header];
        })
});

table { border-collapse: collapse; width: 600px; }
table, th, td { font-family: 'Segoe UI Light'; border: 1px solid black; }
th, td { width: 200px;}
th { background-color: #4CAF50; color: white; }
tr:hover { background-color: #4CAF50; color: white; }
td { text-align: right; }
td:first-child { text-align: left; }
tr:nth-child(even) {background-color: #f2f2f2}
tr:hover {background-color: yellow; color: red;}

h1 { font-family: 'Segoe UI Light'; font-size: 24px; font-style: normal;
     font-variant: normal; font-weight: 500; line-height: 26.4px; }

<h1> Production Hourly Report</h1>
<table id='completions'>
   <caption>Production Orders Completion Per Hour</caption>
   <thead>
      <tr>
         <th>Production Hour</th><th>FFS</th><th>SHF</th><th>SF</th><th>Scrap</th>
      </tr>
   </thead>
<tbody>
</tbody>
</table>

【问题讨论】：

标签： javascript

【解决方案1】：

虽然我仍然不明白发生了什么，以及为什么当我对 ASC 进行排序时一切正常，而在进行 DESC 排序时问题开始了，但我发现 this 回答很有帮助，所以我改变了插入行的方法表尾来自：

var tr = tbody.insertRow(rIndex);

到：

var tr = tbody.insertRow(-1);

并正确显示我的结果。

【讨论】：