如何重新设计tr行中的所有表td

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-3A-4 A-5 A-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>

​