如何重新設計所有的表TD在TR行

Question

我的表是這樣的：

<table> 
<tr> 
    <td> A-1 </td> 
    <td> A-2 </td> 
    <td> A-3 </td> 
    <td> A-4 </td> 
    <td> A-5 </td> 
    <td> A-6 </td> 
    <td> A-7 </td> 
    <td> A-8 </td> 
</tr> 
<tr> 
    <td> B-1 </td> 
    <td> B-2 </td> 
    <td> B-3 </td> 
    <td> B-4 </td> 
    <td> B-5 </td> 
    <td> B-6 </td> 
    <td colspan=2> B-7 </td> 
</tr> </table> 

它是這樣的：

A-1 A-2 A-3 A-4 A-5一-6 A-7 A-8

B-1 B-2 B-3 B-4 B-5 B-6 B-8

在頁面大小的一些變化我想該表更改爲如下表設計：

<table> 
<tr> 
    <td> A-1 </td> 
    <td> A-2 </td> 
</tr> 
<tr> 
    <td> A-3 </td> 
    <td> A-4 </td> 
</tr> 
<tr> 
    <td> A-5 </td> 
    <td> A-6 </td> 
</tr> 
<tr> 
    <td> A-7 </td> 
    <td> A-8 </td> 
</tr> 
<tr> 
    <td> B-1 </td> 
    <td> B-2 </td> 
</tr> 
<tr> 
    <td> B-3 </td> 
    <td> B-4 </td> 
</tr> 
<tr> 
    <td> B-5 </td> 
    <td> B-6 </td> 
</tr> 
<tr> 
    <td colspan=2> B-7 </td> 
</tr> </table> 

這是這樣的：

A-1 A-2

A-3 A-4

A-5 A-6

..

B-7

我不確定這是否可以用CSS或JavaScript來完成。

Answer 1

使用.querySelectorAll("#table1 td")選擇所有td，然後用[].forEach.call，這樣可以遍歷一個元素列表，和球泡新表。你想設計的表

var x = document.querySelectorAll("#table1 td"); 
 
var _html = "<table>"; 
 
[].forEach.call(x, function(el, i) { 
 
    if(i%2==0) _html += "<tr>"; 
 
    _html += el.outerHTML; 
 
    if(i%2==1) _html += "</tr>"; 
 
}); 
 

 
_html += "</table>"; 
 

 
alert(_html); 
 

 
document.write(_html);

<table id="table1"> 
 
    <tr> 
 
    <td>A-1</td> 
 
    <td>A-2</td> 
 
    <td>A-3</td> 
 
    <td>A-4</td> 
 
    <td>A-5</td> 
 
    <td>A-6</td> 
 
    <td>A-7</td> 
 
    <td>A-8</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B-1</td> 
 
    <td>B-2</td> 
 
    <td>B-3</td> 
 
    <td>B-4</td> 
 
    <td>B-5</td> 
 
    <td>B-6</td> 
 
    <td>B-7</td> 
 
    <td>B-8</td> 
 
    </tr>