Decouple thead from tbodies. (#112)

* Decouple thead from tbodies. * Handle null error by using optional chaining and checking for ! undefined * WIP fixed missing thead...
LeeWannacott · May 30, 2023 · 3b60a17 · 3b60a17
1 parent f4038c1
commit 3b60a17
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/public/index.html b/public/index.html
@@ -89,9 +89,8 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <th colspan="2" class="data-sort">On Our Dates</th>
           <th>First Sold Out</th>
         </tr>
-      </thead>
-      <tbody>
         <tr>
+      </thead>
           <td class="tags"></td>
           <td class="category">Comedy</td>
           <td class="show_name">Show 1</td>
@@ -161,7 +160,6 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <td class="pct ours">50%</td>
           <td>2022-07-31</td>
         </tr>
-      </tbody>
       <thead>
         <tr>
           <th>Last Name</th>
@@ -174,7 +172,7 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <th class="data-sort">data-sort days</th>
           <th>dates in dd/mm/yyyy</th>
         </tr>
-      </thead>
+</thead>
       <tr class="table-row-1">
         <td>Franklin</td>
         <td>Benjamin</td>
@@ -230,6 +228,7 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
         <td data-sort="1">Monday</td>
         <td>8/6/1978</td>
       </tr>
+      </tbody>
       <thead>
         <tr>
           <th>Last Name</th>
@@ -242,7 +241,7 @@ <h2>Testing table containing colspan and data-sort and multiple tbodies</h2>
           <th class="data-sort">data-sort days</th>
           <th>dates in dd/mm/yyyy</th>
         </tr>
-      </thead>
+        </thead>
       <tr class="table-row-1">
         <td>Franklin</td>
         <td>Benjamin</td>

diff --git a/public/table-sort.js b/public/table-sort.js
@@ -49,8 +49,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
     if (sortableTable.getElementsByTagName("thead").length === 0) {
       createMissingTableHead(sortableTable);
       if (sortableTable.querySelectorAll("tbody").length > 1) {
-        // Why index 1?; I don't remember
-        return sortableTable.querySelectorAll("tbody")[1];
+        // don't select empty tbody that the browser creates
+        return sortableTable.querySelectorAll('tbody:not(:nth-child(2))');
       } else {
         return sortableTable.querySelectorAll("tbody");
       }
@@ -85,8 +85,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       let foundMatch = false;
       for (let key of Object.keys(inferableClasses)) {
         let classRegexp = inferableClasses[key].regexp;
-        if (tableColumn.innerText) {
-          if (tableColumn.innerText.match(classRegexp) !== null) {
+        if (tableColumn?.innerText !== undefined) {
+          if (tableColumn.innerText.match(classRegexp)) {
             foundMatch = true;
             inferableClasses[key].count++;
           }
@@ -114,21 +114,21 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
       rows: [],
       headers: [],
     };
+    for (let index of table.theads.keys()) {
+      table.headers.push(table.theads.item(index).querySelectorAll("th"));
+    }
     for (let index of table.bodies.keys()) {
       if (table.bodies.item(index) == null) {
         return;
       }
-      table.headers.push(table.theads.item(index).querySelectorAll("th"));
       table.rows.push(table.bodies.item(index).querySelectorAll("tr"));
     }
-
     table.hasClass = {
       noClassInfer: sortableTable.classList.contains("no-class-infer"),
       cellsSort: sortableTable.classList.contains("cells-sort"),
       tableArrows: sortableTable.classList.contains("table-arrows"),
       rememberSort: sortableTable.classList.contains("remember-sort"),
     };
-
     for (
       let headerIndex = 0;
       headerIndex < table.theads.length;