移动 HTML 表格的列答案

【问题标题】：Move columns of a HTML table移动 HTML 表格的列
【发布时间】：2018-12-04 05:51:09
【问题描述】：

我想在数百个我无法控制的网页中移动表格的列，以便它们打印得很好。使用 XPATH，我可以很容易地找到有问题的表格，但是重新排列它们让我很困惑。本质上，我想重新排列：

表：

Header1 Header2
data1   data2

到这里：

表 1：

Header1
data1

表 2：

Header2
data2

这可能吗？

或者，现有 HTML 的简化视图：

<table><tbody>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</tbody></table>

这些部分成为单独的表格并不是绝对必要的，但是data 部分的宽度刚好可以放在一个页面上，因此它们不能在同一行中。

提前致谢！

更新：

我一直在学习 jQuery，看起来我可以使用这样的东西：

function jqsplit($table, chunkSize) {
  var cols = $("th", $table).length;
  var n = cols / chunkSize;

  for (var i = 0; i <= n; i++) {
     $("<br/>").appendTo("body");
     var $newTable = $table.clone().appendTo("body");
     for (var j = cols; j > 0; j--) {
         if (j + chunkSize - 1 <= chunkSize * i || j > chunkSize * i + 1) {
             $('td:nth-child(' + j + '),th:nth-child(' + j + ')', $newTable).remove();
         }
     }
  }  
}

（从here 窃取，但针对我的特定用例进行了修改。）

我现在遇到的问题是我不知道如何使用 jquery 选择我的初始表，以及是否可以一起处理它们。原始表总是有 2 行 3 列，没有其他表符合该条件，有人可以帮忙吗？

【问题讨论】：

如果有人想整理我的答案并且它有效，我会将他们的解决方案标记为答案。

标签： javascript jquery html

【解决方案1】：

好的，解决了。我的解决方案非常不优雅，但效果很好。糟糕的代码，走开！

function jqsplit($table, chunkSize) {
    //Splits these specific tables into 3 by creating 3 copies and deleting the unneeded rows.
    var $randomP = $("<p></p>").insertAfter($table);
    var $newTable1 = $table.clone().appendTo($randomP);
    var $newTable2 = $table.clone().appendTo($randomP);
    var $newTable3 = $table.clone().appendTo($randomP);
    $newTable1.children("tbody").children("tr").children("th").get(2).remove();
    $newTable1.children("tbody").children("tr").children("td").get(2).remove();
    $newTable1.children("tbody").children("tr").children("th").get(1).remove();
    $newTable1.children("tbody").children("tr").children("td").get(1).remove();
    $newTable2.children("tbody").children("tr").children("th").get(2).remove();
    $newTable2.children("tbody").children("tr").children("td").get(2).remove();
    $newTable2.children("tbody").children("tr").children("th").get(0).remove();
    $newTable2.children("tbody").children("tr").children("td").get(0).remove();
    $newTable3.children("tbody").children("tr").children("th").get(1).remove();
    $newTable3.children("tbody").children("tr").children("td").get(1).remove();
    $newTable3.children("tbody").children("tr").children("th").get(0).remove();
    $newTable3.children("tbody").children("tr").children("td").get(0).remove();
    $table.remove();
}

//Split table
var tablelist = $("table");
$.each(tablelist, function(index,value){
    if ( $(this).children("tbody").children("tr").children("th").length == 3 && $(this).children("tbody").children("tr").length == 2 && $(this).children("tbody").children("tr").children("td").length == 3) {
        jqsplit($(this), 1);
        //Don't want to do the below because some pages have several matching tables
        //return false;
    }
});

【讨论】：