inconstant IndexSizeError with Matrix table

Question

I tried to replicate this solution in my app, the data is extracted from MS SQL database, if the time is sorted in ASC it works perfectly, but if sorted in DESC bases, I get the IndexSizeError error, I read about this error in other questions like this and this but could not find an answer.

Below is my code, appreciate to get it solved. 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>

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

Though I still did not understand what is happening, and why when i sort ASC everything goes fine, while issues started when doing DESC sorting, but I found this answer helpful, so i changed my approach for inserting the row at the end of the table from:

var tr = tbody.insertRow(rIndex);

to:

var tr = tbody.insertRow(-1);

and got my results displayed properly.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 12 '17 at 10:41

Hasan A Yousef

22,789
24
132
203

inconstant IndexSizeError with Matrix table

1 Answers1