如何将一列的 html5 表分成两列？

Question

我有一个包含一些嵌套 arrays 的数组，而那些嵌套的 arrays 由字符串和对象组成。 我想根据超级英雄在 object 中的值来显示超级英雄的名称，并相应地为它们着色。

我成功地渲染了表格，其中数组中的每个项目都有一行（ 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 && arr[i][1].flight === 'yes' ) { tdEls.push(` <tr> <td style="color:red;">${arr[i][0]}</td> </tr> `); } if( arr[i][1].flight && arr[i][1].flight === 'no' ) { tdEls.push(` <tr> <td style="color:green;">${arr[i][0]}</td> </tr> `); } if( arr[i][1].superstrength && arr[i][1].superstrength === 'no') { tdEls.push(` <tr> <td style="color:orange;">${arr[i][0]}</td> </tr> `); } if( arr[i][1].differentWorld && 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>

Answer 1

我们可以分成两个单元格并使用 object 键和值作为类名

PS：企鹅不会飞。 他用了一把飞行伞。

 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>