HTML表格將列一分為二？

Question

我有一個要迭代的元素數組，並為每個元素創建<td></td>.

如果我有10個元素，它將創建一個包含一列和10行的表。

有沒有一種方法（用HTML或CSS）拆分成兩半的列，所以我最終得到2列包含5個元素的列？

Answer 1

您可以使用如下代碼：

 var table = document.createElement('table'); var array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; for (var i=0; i<array.length; i+=2) { // iterate every 2 items var tr = document.createElement('tr'); var td = document.createElement('td'); td.innerHTML = array[i]; // first element tr.appendChild(td); td = document.createElement('td'); td.innerHTML = array[i+1]; // second element tr.appendChild(td); table.appendChild(tr); } document.getElementsByTagName('body')[0].appendChild(table);

 table td { border: 1px solid black; }

Answer 2

嘗試這樣的事情：

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }

 <!DOCTYPE html> <html> <head> </head> <body> <h2>Cell that spans two columns:</h2> <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h2>Cell that spans two rows:</h2> <table style="width:100%"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

Answer 3

如果您打算手動執行此操作，則必須使用此表結構：

 <table style="width:100%"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> </table>

看到“ Tr”代表“行”

另一方面，如果您希望通過JScript自動執行此操作，則需要編寫兩個“ if ”語句來控制過程。 或者您也可以使用“ while ”循環。

希望您附帶了代碼，以便我們為您提供更多幫助。

希望這會有所幫助

Answer 4

請參見以下代碼及其工作。 我所做的是：

使用類myTable創建一個空表標簽
在JavaScript中，我做了一個函數：
（a）遍歷數組，
（b）創建一行
（c）將兩個單元格添加到表中（這就是為什么我將計數器i遞增到+ = 2）
（d）將其innerHTML設置為數組值
現在，數組的第一個條目移到表格的底部，如果要放在頂部，則可以反向遍歷數組。

 function populateTable() { var table = document.createElement('table'); var array = ['a', 'b','c','d','e','f','g','h'] for(i=0 ; i<array.length ;i+=2){ var row = table.insertRow(0); cell1 = row.insertCell(0); cell2 = row.insertCell(1); cell1.innerHTML = array[i]; cell2.innerHTML = array[i+1]; } document.getElementsByTagName('body')[0].appendChild(table); }

 table, td { border: 1px solid black; }

 <!DOCTYPE html> <html> <head> </head> <body> <button onclick="populateTable()">Populate Table</button> </body> </html>

HTML表格將列一分為二？

問題描述

4 個解決方案

解決方案1
2 2016-02-21 12:29:38

解決方案2
0 2016-02-21 12:27:52

解決方案3
0 2016-02-21 12:43:11

解決方案4
0 2016-02-21 13:00:26

HTML表格將列一分為二？

問題描述

4 個解決方案

解決方案1 2 2016-02-21 12:29:38

解決方案2 0 2016-02-21 12:27:52

解決方案3 0 2016-02-21 12:43:11

解決方案4 0 2016-02-21 13:00:26

解決方案1
2 2016-02-21 12:29:38

解決方案2
0 2016-02-21 12:27:52

解決方案3
0 2016-02-21 12:43:11

解決方案4
0 2016-02-21 13:00:26