htmlのテーブルをJavaScriptでTransposeする

targetTable = $0; // 対象のテーブルElement

// 配列に詰め替えつつTransposeする
ar2 = [];
Array.from(targetTable.querySelectorAll('tr'), tr => 
  Array.from(tr.querySelectorAll('td,th'))).map((td, x) => {
    td.map((tr, y) => {
      ar2[y] ? 0 : ar2[y] = []; // eq) ar2[y] ??= [];
      ar2[y][x] = tr.cloneNode(true); // xyを逆にすることでtransposedになる
    });
  }
);

// 詰め替え済みの配列をテーブル化する
newT = document.createElement('table');
ar2.map(tr => {
  nr = document.createElement('tr');
  newT.appendChild(nr);
  tr.map(td => {
    nr.appendChild(td);
  });
});
targetTable.parentElement.appendChild(newT);
// targetTable.display='none';

余談

x ??= y というのを「Null合体代入」と言う(MDN)ようだ。

xがnullish(MDN)(null、undefined)のときだけ代入する。
配列の空要素(未代入)を指定して取得したときの値もundefinedになる(?)ためか、この場合も代入が動作する。
配列の空要素(k=[]; のときの k[0] とか、 t=Array(1); のときの t[0] とか。)の話、MDNには出てこないけどね。

こいつそもそも名前持ってないのかしら。不便なんだが。

これは配列の中で存在しない要素、すなわち以下の要素に対しては呼び出しません。
設定されたことがない添字
削除された要素
値を割り当てられたことがない要素

となってるやつなのだけども。

英語のMDNだと「visited」とか書いてやがる。ﾅﾝｼﾞｬｿﾘｬ

"empty slots"だってさ

But in others (most notably array iteration methods), empty slots are skipped.

これか