From 5697bc87df2cf2748489ae6f713cfdaec6e16c79 Mon Sep 17 00:00:00 2001
From: Lee Wannacott <wannacottl@gmail.com>
Date: Thu, 18 May 2023 16:06:19 +1200
Subject: [PATCH] Bug: Fix classes on <tr> not being sorted with the respective
 <tr>. (#89)

---
 public/index.html    |  4 ++--
 public/table-sort.js | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 763213b..dd2870c 100644
--- 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
index 79bf2c6..e8b2496 100644
--- 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]];
         }
       }
     }