javascript - 根据屏幕尺寸 html 表将列移动到新行

Question

我有一个 HTML 格式的三列表格。第三列中的单元格都属于同一类。

如果屏幕宽度小于 750px，我希望每行的第三列移动到该列下的新行。

所以，表格通常看起来像这样:

<table>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
</table>

如果屏幕宽度小于 750px，我希望 javascript 函数使表格看起来像这样:

<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
</table>

Answer 1

Here's a JSFiddle使用它的工作版本(使用 JQuery)。这是实际完成工作的重要部分:

if ($(window).width() < 750) {
    $('td.thirdcol').each(function(i, item) {
        var row = $(item).clone(true).prop('colspan','2').wrapAll('<tr />');
        $(item).closest('tr').after(row);
        $(item).remove();
    });
}

但是，如果我是你，我不会为此使用 Javascript 或表格，而是使用 CSS 和 float div。这正是它们的设计目标。