HTMLをさわれない古めな環境でJavaScriptとcssだけで何とかやっていく方法

HTMLをさわれない古めな環境でJavaScriptとcssだけで何とかやっていく

2019年にもなって、テーブルレイアウトな上HTMLノータッチで見た目を「モダン」にしないといけない課題が発生してしまったので何とかしたログです。

何とかしていくHTML

<table class="classTable hoge">
  <thead>
    <tr>
      <th id="mt_header0" ></th>
      <th id="mt_header1" class="scale">好き</th>
      <th id="mt_header2" class="scale">普通</th>
      <th id="mt_header3" class="scale">嫌い</th>
      <th id="mt_header4" class="scale">飲めない</th>
      <th id="mt_header5" class="scale">その他</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="button">ねこ</th>
      <td headers="mt_header1" class="aaa"><input tabindex="1" type="radio" name="mt_1" id="mt_1_1" value="1"><div class="bbb"><span>ねこ</span><label for="mt_1_1">好き</label></div></td>
      <td headers="mt_header2" class="aaa"><input tabindex="2" type="radio" name="mt_1" id="mt_1_2" value="2"><div class="bbb"><label for="mt_1_2">普通</label></div></td>
      <td headers="mt_header3" class="aaa"><input tabindex="3" type="radio" name="mt_1" id="mt_1_3" value="3"><div class="bbb"><label for="mt_1_3">嫌い</label></div></td>
      <td headers="mt_header4" class="aaa"><input tabindex="4" type="radio" name="mt_1" id="mt_1_4" value="4"><div class="bbb"><label for="mt_1_4">さわれない</label></div></td>
      <td headers="mt_header5" class="aaa"><input tabindex="5" type="radio" name="mt_1" id="mt_1_5" value="5"><div class="bbb"><label for="mt_1_5">その他</label></div></td>
    </tr>
  </tbody>
</table>

実現したいこと

<table class="classTable hoge">
  <thead>
    <tr>
      <th id="mt_header0" ></th>
      <th id="mt_header1" class="scale">好き</th>
      <th id="mt_header2" class="scale">普通</th>
      <th id="mt_header3" class="scale">嫌い</th>
      <th id="mt_header4" class="scale">飲めない</th>
      <th id="mt_header5" class="scale">その他</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="button">ねこ</th>
      <td>
        <!-- ここを囲みたい -->
        <table>
          <tr>
            <td>
              <td headers="mt_header1" class="aaa"><input tabindex="1" type="radio" name="mt_1" id="mt_1_1" value="1"><div class="bbb"><span>ねこ</span><label for="mt_1_1">好き</label></div></td>
              <td headers="mt_header2" class="aaa"><input tabindex="2" type="radio" name="mt_1" id="mt_1_2" value="2"><div class="bbb"><label for="mt_1_2">普通</label></div></td>
              <td headers="mt_header3" class="aaa"><input tabindex="3" type="radio" name="mt_1" id="mt_1_3" value="3"><div class="bbb"><label for="mt_1_3">嫌い</label></div></td>
              <td headers="mt_header4" class="aaa"><input tabindex="4" type="radio" name="mt_1" id="mt_1_4" value="4"><div class="bbb"><label for="mt_1_4">さわれない</label></div></td>
              <td headers="mt_header5" class="aaa"><input tabindex="5" type="radio" name="mt_1" id="mt_1_5" value="5"><div class="bbb"><label for="mt_1_5">その他</label></div></td>
            </td>
          </tr>
        </table>
        <!-- /ここを囲みたい -->
      </td>
    </tr>
  </tbody>
</table>

tbodyの中にあるth以外のtdを各tr内で囲んでいきます。

UI上ではthの「ねこ」だけを一覧にして表示しておき、th「ねこ」をクリックすると
tdがまとまってモーダルのように出てくるUIを実装します。

前提

・今回のHTMLはテンプレートなため、中に入るtrやtdの数は流動的で、全バリエーションに対応しないといけません。
・入れ子のルールを守ります（tr直下にdivを入れたりしない）

やっていこう

とりあえずできたものです

$(function(){
    var classLength = $('.classTable tbody th').length;
    var newBlock;
    for (var i=0; (classLength + 1) > i ; i++ ) {
    // 同じnameを持っているものを洗い出して囲う
    const newBlock = $('input[name^="mt_'+ i + '"]').parent();

    $(newBlock).wrapAll('<td class="modalBlack"><div class="modalWhite"><table><tr>');
    }
});

解説

var classLength = $('.classTable tbody th').length;

まず.classTable tbody thで囲みたいthの数を数えました。「0,1,2,3,4」を出力できます。
これで出てくるthの数だけ同じことができます。「ねこ」だけじゃなく、「いぬ」「とり」など他の要素が増えて100個になっても大丈夫。

for (var i=0; (classLength + 1) > i ; i++ ) {

「0,1,2,3,4」を「1,2,3,4,5」に変更して、

// 同じnameを持っているものを洗い出して囲う
const newBlock = $('input[name^="mt_'+ i + '"]').parent();

name="mt_数字"で始まるもののparent（親）をまとめて

    $(newBlock).wrapAll('<td><div><table><tr>');

まとめたものを<td><div><table><tr>で囲いました。

苦戦しましたが出来上がってみると割と簡単なことでした…
HTMLが弄れればもう少し楽にできるのですが、どうしてもHTMLをさわれない時用の魔改造でした。

もっといい方法があったらぜひコメントで教えてください！