Средства и методы разработки

Хотя конечно данные из таблицы в таблицу, если структура совпадает, можно переносить изоморфно, путем итерации по XML-таблицы, как у тебя сделано. И копирования данных опять же в шаблон HTML-таблицы, только полей присутствующих в шаблоне: например, в XML 10 разных колонок, а в HTML нужно только 5, соответственно в HTML-шаблоне присутствует только строка заголовка и одна строка шаблона, которая размножается по числу строк в XML-таблице. И потом заполняется только колонки присутствующие в HTML, остальные пропускаются. Т.е. итерация по строкам XML во внешнем цикле и по колонкам HTML во внутреннем, с вытаскиванием нужных колонок по атрибутам, XPath-запросу или индексу.

Самая большая проблема у тебя --- ты зачем-то руками генерируешь HTML. Эту функция в Javascript нужна для специальных целей, а не обычных приложений. Нормальный путь: трансформировать какой-либо имеющийся шаблон заполнив его данными. Ну ты ж когда GUI-приложение на PC делаешь, не генерируешь же в рантайме весь UI? Ты его заранее, может быть даже визуально в специальной программе, проектируешь. Так же и HTML шаблон можно. Потом когда программа запускается -- у тебя сразу на старте создаются все окна из готовых шаблонов. Создавать в динамике есть необходимость только те окна, которые не являются синглтонами, что на самом деле редкость, и опять же часто это проще делать дуплицированием шаблона, а не конструированием в динамике. И эти окна или шаблоны в HTML могут сразу быть, но быть не отображаемые, и делаться видимыми когда нужно. Принцип в GUI и web -- один и тот же. И в HTML по сути практически ничего динамического быть не должно, должно меняться только свойство display отдельных элементов. Разумеется не напрямую, а через присвоение стилей, по сути весь внешний вид должен быть исключительно управляемый стилями (см. ниже).

Единственное что в такой системе делается в динамике: это заполнение данных (текста) в поля шаблона и вынужденное дуплицирование строк или колонок в шаблонах таблиц, или строк в списках. В идеале тут должен быть некий готовый шаблонизатор, но к сожалению я не знаю таких. Те что есть -- работают как ты, через ()(). Но я не веб-дизайнер, я нормальный программист, и точка зрения у меня отличается от вебдизайнерской (у которых хуяк-хуяк и в продакшн). К большому счастью сделать самодельный почти что универсальный шаблонизатор не так уж и сложно: не обязательно писать отдельный код для каждой таблицы или код для всех возможных полей ввода/вывода присутствующих на экране -- это всё, в принципе, может делаться одной функцией. Но иногда конечно вылезают острые углы и приходится сглаживать говнокодом.

В случае таблиц или списков проще сделать шаблонную строку и колонку невидимой путем отметки специальным стилем и после дуплицирования стиль менять на другой, означающий, что это дуплицированная строка которую в будущем, перед наполнением новыми данными, нужно удалить. Для остальных полей ввода-вывода всё относительно просто: они все сажаются в формы (чтоб не морочиться с querySelector) и доступны по имени в глобальном неймспейсе. Да, шаблоны, разумеется, тоже сидят в формах. И пишется функция, которая "изоморфно-рекурсивно" умеет переносить содержимое JSON в формы. Ну т.е. если в JSON есть запись с именем "value", то её содержимое попадает в элемент указанной формы с таким именем. В зависимости от типа элемента присвоение производится к value (input), к innerText (object), массивы объектов присваиваются таблицам с тем же именем (рекурсивно) и происходит дуплицирование строк...

Касательно твоего вопроса: всё связанное с визуальным оформлением следует делать исключительно через стили. Даже если ты свойства из javascript руками меняешь, правильней будет менять стиль и отдельно написать правило для раскраски данного стиля. Так архитектура ПО в целом остаётся консистентной, а не превращается в вермишель. И в твоём случае может быть специальная функция, которая бегает по указанным таблицам и в зависимости от содержимого ячейки дописывает дополнительные стили (element.classList += "red"). Функция вызывается после присвоения ячейкам новых значений. И в CSS пишешь уже что такое "red" в твоём понимании, например: .red { background-color: lightgreen; }...