Блог

Главная - Вопросы по программированию - Как я могу разделить таблицу html5 из одного столбца на два?

Как я могу разделить таблицу html5 из одного столбца на два?

#javascript #html #jquery #arrays

#javascript #HTML #jquery ( jquery ) #массивы

Вопрос:

У меня есть массив с несколькими вложенными массивами, и эти вложенные массивы состоят из строк и объектов. Я хочу отобразить имена супергероев на основе значений, которые они имеют в объекте, и, следовательно, раскрасить их соответствующим образом.

Мне удалось отобразить таблицу, в которой tr для каждого элемента в массиве есть одна строка (), а строка состоит только из одного столбца ( td ) . Но я не могу отобразить таблицу, в которой будет одна строка ( tr ) для каждых двух элементов. То есть в каждой строке будет по два столбца ( td ).

Это то, что у меня есть прямо сейчас:

введите описание изображения здесь

Это то, чего я хочу:

введите описание изображения здесь

Вот код:

 const tdEls         = [];
const arr         = [
  [
    'superman', {'flight': 'yes'}
  ],
  [
    'batman', {'flight': 'no'}
  ],
  [
    'green arrow', {'superstrength': 'no'}
  ],
  [
    'penguin', {'flight': 'yes'}
  ],
  [
    'shazam', {'flight': 'no'}
  ],
  [
    'wonderwoman', {'flight': 'yes'}
  ],
  [
    'cyborg', {'flight': 'no'}
  ],
  [
    'flash', {'superstrength': 'no'}
  ],
  [
    'martian', {'superstrength': 'no'}
  ],
  [
    'joker', {'flight': 'no'}
  ],
  [
    'robin', {'differentWorld': 'no'}
  ]
];


for ( let i = 0; i < arr.length; i   ) {
      if( arr[i][1].flight amp;amp; arr[i][1].flight === 'yes' ) {
          tdEls.push(`
              <tr>
                  <td style="color:red;">${arr[i][0]}</td>
              </tr>
          `);
      }

      if( arr[i][1].flight amp;amp; arr[i][1].flight === 'no' ) {
          tdEls.push(`
              <tr>
                  <td style="color:green;">${arr[i][0]}</td>
              </tr>
          `);
      }

      if( arr[i][1].superstrength amp;amp; arr[i][1].superstrength === 'no') {
          tdEls.push(`
              <tr>
                  <td style="color:orange;">${arr[i][0]}</td>
              </tr>
          `);
      }

      if( arr[i][1].differentWorld amp;amp; arr[i][1].differentWorld === 'no' ) {
          tdEls.push(`
              <tr>
                  <td style="color:blue;">${arr[i][0]}</td>
              </tr>
          `);
      }
}

document.querySelector('table').innerHTML = tdEls.join(''); 
 table{
  border: 1px solid black;
}

table td{
  border: 1px solid black;
} 
 <table></table>

Комментарии:

1. Таблица с более чем одним столбцом может быть отражена массивом массивов. Попробуйте создать ее из исходного массива, где каждый элемент основного массива представляет строку таблицы, а его элементы — ячейки. Как только у вас это получится, превратить его в HTML будет легко. (излишне говорить, что это основная проблема с множеством существующих решений) ((кроме того, вам нужно перестать рассматривать это как «разделение таблицы HTML» и «составление строки HTML». речь идет о (ре) структурировании данных, и только об этом))

2. Просто удалите <tr> и </tr> из того, что вы помещаете в массив. Помещайте их в массив каждые две итерации. Большинство людей используют для этого оператор модуля ( % ). Или вы могли бы реструктурировать свои данные, как рекомендует @ChrisG. Реструктуризация ваших данных позволит вам написать код, который генерирует HTML-код один раз, и заставить его реагировать на структуру данных, поэтому, если завтра вам понадобятся три столбца, вы просто реструктурируете данные, а не свой код.

3. Эй, @ChrisG, разве это не то, что я сделал в своем коде? Фрагмент, который я предоставил, показывает, что я перебираю основной массив, а затем на основе данных создаю TRS и соответствующие TDS. Если бы вы могли объяснить, что вы имели в виду, с помощью небольшого кода, это было бы здорово.

4. @HereticMonkey Но даже если я реструктурирую данные, я столкнусь с той же проблемой, поскольку мне придется перебирать данные, а затем создавать trs и td на основе условных обозначений?

5. Вы столкнетесь с аналогичной проблемой, но не с такой же. Несмотря ни на что, вам придется отделить создание строк таблицы от создания ячеек таблицы. Лично я бы сделал это один раз; Создайте функцию, которая принимает массив массивов. Для каждого элемента во внутреннем массиве создайте строку таблицы. Внутри этого для каждого элемента в подмассиве создайте ячейку таблицы. В основном два вложенных цикла. Есть примеры по всему переполнению стека с большим количеством кода.

Ответ №1:

Мы можем разделить две ячейки и использовать ключи объектов плюс значения в качестве имен классов

PS: Пингвин не мог летать. Он использовал flight umbrella.

 const arr = [ [ 'superman', {'flight': 'yes'} ], [ 'batman', {'flight': 'no'} ], [ 'green arrow', {'superstrength': 'no'} ], [ 'penguin', {'flight': 'yes'} ], [ 'shazam', {'flight': 'no'} ], [ 'wonderwoman', {'flight': 'yes'} ], [ 'cyborg', {'flight': 'no'} ], [ 'flash', {'superstrength': 'no'} ], [ 'martian', {'superstrength': 'no'} ], [ 'joker', {'flight': 'no'} ], [ 'robin', {'differentWorld': 'no'} ] ]; 

const chunk =  (arr, len) => {
  let chunks = [], i = 0, n = arr.length;
  while (i < n)  chunks.push(arr.slice(i, i  = len));
  return chunks;
};

const tdEls = arr.map(hero => `<td class="${Object.keys(hero[1])}${Object.values(hero[1])}">${hero[0]}</td>`)
document.querySelector('table tbody').innerHTML = chunk(tdEls,2).map(cnk => `<tr>${cnk.join("")}</tr>`).join("") 
 table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

.flightyes {
  color: red
}

.flightno {
  color: green
}

.superstrengthno {
  color: orange
}

.differentWorldno {
  color: blue
} 
 <table><tbody></tbody></table>