Question

我有一系列元素，我迭代并为每个元素创建<td></td>.

如果我有例如10个元素，它将创建一个包含一列和10行的表。

有没有办法拆分（在HTML或CSS中）将该列分成两半，所以我最终得到2列5个元素？

Answer 1

您可以使用以下代码：

＆＃13;

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);

＆＃13;

table td { border: 1px solid black; }

＆＃13;

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

如果您打算手动执行此操作，则必须使用此表结构：

＆＃13;

<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>

＆＃13;

并看到＆＃34; Tr＆＃34;代表＆＃34;行＆＃34;

另一方面，如果您希望通过JScript自动执行此操作然后你需要编程两个＆＃34; 如果＆＃34;声明来控制过程。或者你也可以使用＆＃34; 而＆＃34;循环也是如此。

我希望您附上代码，以便我们为您提供更多帮助。

希望这是有帮助的

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 个答案: