HTML表格将列一分为二？
[英]Html table split column in two?
问题描述
I have an array of elements that I iterate over and for each element create <td></td>. 
我有一个要迭代的元素数组，并为每个元素创建<td></td>.
If I have eg 10 elements, it will create a table with one column and 10 rows. 如果我有10个元素，它将创建一个包含一列和10行的表。
Is there a way to split (in HTML or CSS) to split that column in half, so I end up with 2 columns with 5 elements? 有没有一种方法（用HTML或CSS）拆分成两半的列，所以我最终得到2列包含5个元素的列？
4 个解决方案
解决方案1
2 2016-02-21 12:29:38
You can use code like this: 您可以使用如下代码：
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; }
解决方案2
0 2016-02-21 12:27:52
Try something like this: 尝试这样的事情：
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>
解决方案3
0 2016-02-21 12:43:11
If you are planning on doing so manually then you have to use this table structure: 如果您打算手动执行此操作，则必须使用此表结构：
<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>
And saw "Tr" stands for "row" 看到“ Tr”代表“行”
On the other hand if you want this to happen automatically through JScript then you need to program two " if " statements to control the process. 另一方面，如果您希望通过JScript自动执行此操作，则需要编写两个“ if ”语句来控制过程。 or you can also use a " while " loop as well. 或者您也可以使用“ while ”循环。
I wish you had the code attached so that we can help you more. 希望您附带了代码，以便我们为您提供更多帮助。
Hope this was helpful 希望这会有所帮助
解决方案4
0 2016-02-21 13:00:26
See the following code and its working. 请参见以下代码及其工作。 What I did was: 我所做的是：
- Create an empty table tag with a class myTable 使用类myTable创建一个空表标签
In JavaScript, I made a function that:
在JavaScript中，我做了一个函数： (a) traverses through an array,
（a）遍历数组， (b) creates a row
（b）创建一行 (c) adds two cells to the table (thats why i incremented the counter i to +=2)
（c）将两个单元格添加到表中（这就是为什么我将计数器i递增到+ = 2） (d) Sets their innerHTML to the array value
（d）将其innerHTML设置为数组值 - Right now the first entry of array goes to the bottom of the table, if you want it to the top, you can just traverse the array in reverse. 现在，数组的第一个条目移到表格的底部，如果要放在顶部，则可以反向遍历数组。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.