javascript - 如何重新设计 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-3 A-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>