From 8e8041cdc4a3190c70c7aa177b4862e3c304129b Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Sat, 1 Nov 2025 13:21:31 +0000
Subject: [PATCH] Enhance row selection functionality by updating row highlight
 based on checkbox state and managing visibility of selection column

---
 templates/question_table_view.html | 31 +++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/templates/question_table_view.html b/templates/question_table_view.html
index 25fe290d..51a214dc 100644
--- a/templates/question_table_view.html
+++ b/templates/question_table_view.html
@@ -237,6 +237,11 @@ document.addEventListener('DOMContentLoaded', function() {
         const checks = findRowCheckboxes();
         const count = checks.filter(c => c.checked).length;
         selectedCountSpan.textContent = count;
+        // update row highlight based on checkbox state
+        checks.forEach(cb => {
+            const tr = cb.closest('tr');
+            if (tr) tr.classList.toggle('table-active', cb.checked);
+        });
     }
 
     function setCheckboxesDisabled(disabled) {
@@ -245,8 +250,28 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // disable checkboxes by default
+    function hideSelectionColumn() {
+        if (!table) return;
+        // hide any th/td that contains the selection checkbox
+        table.querySelectorAll('th, td').forEach(function(cell) {
+            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
+                cell.style.display = 'none';
+            }
+        });
+    }
+
+    function showSelectionColumn() {
+        if (!table) return;
+        table.querySelectorAll('th, td').forEach(function(cell) {
+            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
+                cell.style.display = '';
+            }
+        });
+    }
+
+    // disable checkboxes by default and hide the selection column
     setCheckboxesDisabled(true);
+    hideSelectionColumn();
 
     // row click toggling
     document.addEventListener('click', function(e) {
@@ -259,6 +284,8 @@ document.addEventListener('DOMContentLoaded', function() {
         const cb = tr.querySelector('input[type="checkbox"]');
         if (cb && !cb.disabled) {
             cb.checked = !cb.checked;
+            // reflect highlight immediately
+            tr.classList.toggle('table-active', cb.checked);
             updateSelectedCount();
         }
     });
@@ -270,10 +297,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 toggleBtn.textContent = 'Disable row selection';
                 selectionControls.style.display = '';
                 setCheckboxesDisabled(false);
+                showSelectionColumn();
             } else {
                 toggleBtn.textContent = 'Enable row selection';
                 selectionControls.style.display = 'none';
                 setCheckboxesDisabled(true);
+                hideSelectionColumn();
                 // clear any selected checkboxes
                 findRowCheckboxes().forEach(cb => cb.checked = false);
                 updateSelectedCount();