簡體   English   中英

如何將一列的 html5 表分成兩列?

[英]How can I split an html5 table of one column into two?

我有一個包含一些嵌套 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>

我們可以分成兩個單元格並使用 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM