Styleeees

public/search.js

@@ -10,7 +10,7 @@ const tableBody = document.getElementById("results");
 const table = document.getElementById("table");
 const nomatch = document.getElementById("nomatch");
 
-updateTableVisibility();
+updateTableVisibility(0);
 
 document.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
     checkbox.addEventListener("change", e => {
@@ -52,6 +52,7 @@ async function updateSearch () {
     if (resultObject.matches.length === 0) {
        nomatch.style.display = "";
        table.style.display = "none";
+       updateTableVisibility(0);
        return;
     }
     nomatch.style.display = "none"
@@ -62,11 +63,10 @@ async function updateSearch () {
     //   headerRow.innerHTML += `<td>${attribute}</td>`; 
     //});
     headerRow.innerHTML += `
-            <td>ID</td>
-            <td>Name</td>
-            <td>Contract</td>
-            <td>Team</td>
             <td>Position</td>
+            <td>Name</td>
+            <td>Team</td>
+            <td>Contract</td>
             `;
     tableHeader.appendChild(headerRow);
 
@@ -78,25 +78,28 @@ async function updateSearch () {
         //    row.innerHTML += `<td>${player}</td>l`;
         //}
         row.innerHTML = `
-            <td>${player.PlayerID}</td>
-            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
-            <td>${formatSalary(player.TotalValue)}</td>
-            <td>${player.Team}</td>
             <td>${player.Position}</td>
+            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
+            <td>${player.Team}</td>
+            <td>${formatSalary(player.TotalValue)}</td>
         `;
         tableBody.appendChild(row);
     });
-    updateTableVisibility();
+    updateTableVisibility(resultObject.matches.length);
 };
 
-function updateTableVisibility() {
+function updateTableVisibility(length) {
     if (!tableBody) return;
+    console.log(length);
 
     const rows = tableBody.querySelectorAll("tr");
-    if (rows == null) return;
-    if (rows.length != 0) {
-        table.style.display = "";
+    if (rows == null) {
+        table.closest("div").style.display = "none";
+        return;
+    }
+    if (length != 0) {
+        table.closest("div").style.display = "";
     } else {
-        table.style.display = "none";
+        table.closest("div").style.display = "none";
     }
 }