Сворачиваемая / расширяемая HTML строк таблицы

Question

У меня есть отсортированная HTML Таблица, с которой мне нужна помощь для последнего небольшого исправления. Моя таблица в настоящее время отсортирована по программе. Я хочу сделать программную строку сворачиваемой / расширяемой для данных внутри нее, чтобы я мог отображать / скрывать ее. Затем в рамках этого я хочу сгруппировать по элементу «Результат». так же, как я сделал Program. И пусть эта строка также может сворачиваться / расширяться, потому что будет гораздо больше двух результатов, оба из которых будут протоколами собрания и MSR

Вот изображение моей таблицы до сих пор и то, что она выводит:

Here is my code:

.then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(JSON.stringify(objItems));
      console.log(objItems);
      var tableContent =
        '  Программа  '+ " Кому " + " Дата отправки " + " Утверждено  «+»  Примечания  «+»  Срок поставки  «+»   "; var sortedObj = {} objItems.forEach (item => {var program = item.Program; delete (item.Program); // удаляем эту строку, чтобы сохранить программу в данных элемента if (! sortedObj [program]) {sortedObj [программа] = [];} sortedObj [программа] .pu sh (элемент);}); // сортируем по доставляемому Object.keys (sortedObj) .forEach (key => {sortedObj [key] .sort ((a, b) => {if (a.Deliverable === b.Deliverable) {return 0;} return a.Deliverable> b.Deliverable? 1: -1;})}); Object.keys (sortedObj) .forEach ((ключ, индекс) => {tableContent + = " "; tableContent + =" "+ key +""; tableContent + =""; sortedObj [key] .forEach (obj => {tableContent + =" "; tableContent + =" "; tableContent + =" "+ obj.To +""; tableContent + =" "+ obj.Date +""; tableContent + =" "+ obj.Approved +""; tableContent + =" "+ obj.Notes +""; tableContent + =" "+ obj .Deliverable + ""; tableContent + = "";});}); $ ("# результатов"). Append (tableContent);}) .catch ((err) => {alert ( «Ошибка:» + err); console.error (err);});});