Bug: Fix classes on <tr> not being sorted with the respective <tr>. (#89

)
LeeWannacott · May 18, 2023 · 5697bc8 · 5697bc8
1 parent 58397c9
commit 5697bc8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,7 @@ <h1>Manual testing of table sort js</h1>
           <th>dates in dd/mm/yyyy</th>
         </tr>
       </thead>
-      <tr>
+      <tr class="table-row-1">
         <td>Franklin</td>
         <td>Benjamin</td>
         <td>1706/1/17</td>
@@ -30,7 +30,7 @@ <h1>Manual testing of table sort js</h1>
         <td>10b</td>
         <td>17/6/1978</td>
       </tr>
-      <tr>
+      <tr class="table-row-2">
         <td>da Vinci</td>
         <td>Zarlo</td>
         <td>1452/4/15</td>

diff --git a/public/table-sort.js b/public/table-sort.js
@@ -141,7 +141,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         const dataAttributeTd = tr.querySelectorAll("td").item(columnIndex)
           .dataset.sort;
         columnData.push(`${dataAttributeTd}#${i}`);
-        columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
+        columnIndexAndTableRow[columnData[i]] = tr.outerHTML;
       }
     }
 
@@ -206,7 +206,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
             timeinSeconds = hours + minutesInSeconds + seconds;
           }
           columnData.push(`${timeinSeconds}#${i}`);
-          columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
+          columnIndexAndTableRow[columnData[i]] = tr.outerHTML;
         }
       } catch (e) {
         console.log(e);
@@ -244,7 +244,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
             );
           }
           columnData.push(`${numberToSort}#${i}`);
-          columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
+          columnIndexAndTableRow[columnData[i]] = tr.outerHTML;
         }
       } catch (e) {
         console.log(e);
@@ -302,7 +302,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
         }
         if (tdTextContent.trim() !== "") {
           if (isFileSize) {
-            fileSizeColumnTextAndRow[columnData[i]] = tr.innerHTML;
+            fileSizeColumnTextAndRow[columnData[i]] = tr.outerHTML;
           }
           // These classes already handle pushing to column and setting the tr html.
           if (
@@ -314,12 +314,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
             !isSortDateMonthDayYear
           ) {
             columnData.push(`${tdTextContent}#${i}`);
-            columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.innerHTML;
+            columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.outerHTML;
           }
         } else {
           // Fill in blank table cells dict key with filler value.
           columnData.push(`${fillValue}#${i}`);
-          columnIndexAndTableRow[`${fillValue}#${i}`] = tr.innerHTML;
+          columnIndexAndTableRow[`${fillValue}#${i}`] = tr.outerHTML;
         }
       }
 
@@ -386,6 +386,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       }
     }
 
+
     function updateTable(tableProperties) {
       const { tableRows, columnData, isFileSize } = tableProperties;
       for (let [i, tr] of tableRows.entries()) {
@@ -423,7 +424,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
           tr.querySelectorAll("td").item(columnIndex).innerHTML =
             fileSizeInBytesHTML;
         } else if (!isFileSize) {
-          tr.innerHTML = columnIndexAndTableRow[columnData[i]];
+          tr.outerHTML = columnIndexAndTableRow[columnData[i]];
         }
       }
     }