QA@IT

<html>1つのtableをjavascriptで複数のtableに分裂させたい

354 PV

質問失礼致します。

現在、html内で記述されているtableを、javascriptにより複数に分けようとしているのですが、上手く行きません。
具体的には、

<body>
 <table style="table-layout: fixed;">
  <thead>
   <tr>~</tr>
  </thead>

  <tbody>
   <tr>
    <td>行1-1</td>
    <td>行1-2</td>
   </tr>
   <tr>
    <td>行2-1</td>
    <td>行2-2</td>
   </tr>
  </tbody>

 </table>
</body>

というテーブルを、適当な行で以下のように分断させ、2つ以上のテーブルを作ろうとしています。

 <table style="table-layout: fixed;">
  <thead>
   <tr>~</tr>
  </thead>
  <tbody>
   <tr>
    <td>行1-1</td>
    <td>行1-2</td>
   </tr>
  </tbody>
 </table>

 <table style="table-layout: fixed;">
  <thead>
   <tr>~</tr>
  </thead>
  <tbody>
   <tr>
    <td>行2-1</td>
    <td>行2-2</td>
   </tr>
  </tbody>
 </table>

〇試したこと
適当なtr要素に、innerHTMLでタグを書き加えて(/tbody /table table~thead~tr)無理矢理テーブルタグを一度閉じ、
また新しいテーブルを作成させようとしたのですが、thead以外のタグ(/tbody /tableなど)が全て無かったことにされてしまいました。

なんとか1つのテーブルを複数に分裂させる方法はないでしょうか。
お知恵をお借りできたら幸いです。何卒宜しくお願い致します。

回答

こんな感じでいかがでしょうか。

// 分割対象のテーブルの要素を取得してDOMから外す
const targetTable = document.querySelector('table');
targetTable.remove();

// 取得したテーブルから行要素だけを抜き出す
const rows = Array.from(targetTable.querySelectorAll('tbody > tr'));
rows.forEach(row => row.remove());

// 行要素を任意の個数ずつグルーピングする
const CHUNK_SIZE = 1;
const chunks = [];
for (var i = 0; i < rows.length; i += CHUNK_SIZE) {
    chunks.push(rows.slice(i, i + CHUNK_SIZE));
}

// グループ毎で元テーブルの複製に行要素を詰め込んでDOMに挿入する
chunks.forEach(chunk => {
  const cloneTable = targetTable.cloneNode(true);
  const tbody = cloneTable.querySelector('tbody');
  chunk.forEach(row => tbody.appendChild(row));
  document.body.appendChild(cloneTable);
});
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。