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，这样您就可以循环遍历元素列表，并对新表格进行修改。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: