WebUI: Add ability to toggle alternating row colors in tables

src/webui/www/private/scripts/client.js

@@ -845,7 +845,6 @@ window.addEventListener("DOMContentLoaded", () => {
                         });
                     }
                     torrentsTable.updateTable(full_update);
-                    torrentsTable.altRow();
                     if (response["server_state"]) {
                         const tmp = response["server_state"];
                         for (const k in tmp) {

src/webui/www/private/scripts/dynamicTable.js

@@ -88,6 +88,7 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.setupHeaderEvents();
             this.setupHeaderMenu();
             this.setSortedColumnIcon(this.sortedColumn, null, (this.reverseSort === "1"));
+            this.setupAltRow();
         },
 
         setupCommonEvents: function() {
@@ -566,17 +567,10 @@ window.qBittorrent.DynamicTable ??= (() => {
             return this.selectedRows.contains(rowId);
         },
 
-        altRow: function() {
-            if (!MUI.ieLegacySupport)
-                return;
-
-            const trs = this.tableBody.getElements("tr");
-            trs.each((el, i) => {
-                if (i % 2)
-                    el.addClass("alt");
-                else
-                    el.removeClass("alt");
-            });
+        setupAltRow: function() {
+            const useAltRowColors = (LocalPreferences.get("use_alt_row_colors", "true") === "true");
+            if (useAltRowColors)
+                document.getElementById(this.dynamicTableDivId).classList.add("altRowColors");
         },
 
         selectAll: function() {
@@ -2147,25 +2141,6 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.updateGlobalCheckbox();
         },
 
-        altRow: function() {
-            let addClass = false;
-            const trs = this.tableBody.getElements("tr");
-            trs.each((tr) => {
-                if (tr.hasClass("invisible"))
-                    return;
-
-                if (addClass) {
-                    tr.addClass("alt");
-                    tr.removeClass("nonAlt");
-                }
-                else {
-                    tr.removeClass("alt");
-                    tr.addClass("nonAlt");
-                }
-                addClass = !addClass;
-            });
-        },
-
         _sortNodesByColumn: function(nodes, column) {
             nodes.sort((row1, row2) => {
                 // list folders before files when sorting by name
@@ -2496,25 +2471,6 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.columns["availability"].updateTd = displayPercentage;
         },
 
-        altRow: function() {
-            let addClass = false;
-            const trs = this.tableBody.getElements("tr");
-            trs.each((tr) => {
-                if (tr.hasClass("invisible"))
-                    return;
-
-                if (addClass) {
-                    tr.addClass("alt");
-                    tr.removeClass("nonAlt");
-                }
-                else {
-                    tr.removeClass("alt");
-                    tr.addClass("nonAlt");
-                }
-                addClass = !addClass;
-            });
-        },
-
         _sortNodesByColumn: function(nodes, column) {
             nodes.sort((row1, row2) => {
                 // list folders before files when sorting by name

src/webui/www/private/scripts/prop-files.js

@@ -474,7 +474,6 @@ window.qBittorrent.PropFiles ??= (() => {
 
         torrentFilesTable.populateTable(rootNode);
         torrentFilesTable.updateTable(false);
-        torrentFilesTable.altRow();
 
         if (selectedFiles.length > 0)
             torrentFilesTable.reselectRows(selectedFiles);
@@ -703,12 +702,10 @@ window.qBittorrent.PropFiles ??= (() => {
 
     const expandNode = function(node) {
         _collapseNode(node, false, false, false);
-        torrentFilesTable.altRow();
     };
 
     const collapseNode = function(node) {
         _collapseNode(node, true, false, false);
-        torrentFilesTable.altRow();
     };
 
     const expandAllNodes = function() {
@@ -718,7 +715,6 @@ window.qBittorrent.PropFiles ??= (() => {
                 _collapseNode(child, false, true, false);
             });
         });
-        torrentFilesTable.altRow();
     };
 
     const collapseAllNodes = function() {
@@ -728,7 +724,6 @@ window.qBittorrent.PropFiles ??= (() => {
                 _collapseNode(child, true, true, false);
             });
         });
-        torrentFilesTable.altRow();
     };
 
     /**

src/webui/www/private/scripts/prop-peers.js

@@ -90,7 +90,6 @@ window.qBittorrent.PropPeers ??= (() => {
                         });
                     }
                     torrentPeersTable.updateTable(full_update);
-                    torrentPeersTable.altRow();
 
                     if (response["show_flags"]) {
                         if (show_flags !== response["show_flags"]) {

src/webui/www/private/scripts/prop-trackers.js

@@ -108,7 +108,6 @@ window.qBittorrent.PropTrackers ??= (() => {
                     });
 
                     torrentTrackersTable.updateTable(false);
-                    torrentTrackersTable.altRow();
 
                     if (selectedTrackers.length > 0)
                         torrentTrackersTable.reselectRows(selectedTrackers);

src/webui/www/private/scripts/search.js

@@ -343,7 +343,6 @@ window.qBittorrent.Search ??= (() => {
 
         // must restore all filters before calling updateTable
         searchResultsTable.updateTable();
-        searchResultsTable.altRow();
 
         // must reselect rows after calling updateTable
         if (rowsToSelect.length > 0)
@@ -823,7 +822,6 @@ window.qBittorrent.Search ??= (() => {
                         $("numSearchResultsTotal").textContent = searchResultsTable.getRowIds().length;
 
                         searchResultsTable.updateTable();
-                        searchResultsTable.altRow();
                     }
 
                     setupSearchTableEvents(true);