不変IndexSizeError Matrixテーブル

Question

私のアプリでthisソリューションを複製しようとしましたが、データがMS SQLデータベースから抽出されました。ASCで時間がソートされていると完全に動作しますが、DESCベースでソートされた場合はIndexSizeErrorエラー、私はthisとthisのような他の質問でこのエラーについて読んだが、答えを見つけることができなかった。

以下は私のコードです。解決に感謝します。 thaks

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>

Answer 1

ので、DESCのソートを行う際に問題が始めたが、私はthis答えが役に立ったと評価している間、私はまだ何が起こっているのか理解できませんでしたが、私のソートASCすべてがうまく行く理由をするとき

var tr = tbody.insertRow(rIndex); 

に：

私からテーブルの最後に行を挿入するための私のアプローチを変え

私の結果は正しく表示されています。