読者です 読者をやめる 読者になる 読者になる

jQuery table

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>スクロール実験</title>
</head>
<script>
  $(document).ready(function(){
    $('#testTable').each(function () {
      var pre_element = null;
      var col_num = 0;
      $(this).find('tr').each(function () {
        var now_th = $(this).find('th').eq( col_num );
        // 前回の要素名
        if (pre_element == null) {
          // 前回の要素名を設定
          pre_element = now_th;
        } else if (now_th.text() == pre_element.text()) {
          // 要素を削除
          now_th.remove();
          // rowspanがnullの場合
          if (pre_element.attr('rowspan') == null) {
            // rowspanに1を設定
            pre_element.attr('rowspan', 1);
          }
          //
          pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
        } else {
          //
          pre_element = now_th;
        }
      });
    });

    $("#radio01").click(function() {
        $("tr").show();
    });
    $("#radio02").click(function() {
      $('#testTable').each(function() {
        var col_num = 0;
        $(this).find('tr').each(function() {
          var now_th = $(this).find('td').eq( col_num );
          console.log($(now_th).attr('class'));
          if (now_th.text() === "千葉") {
            $(".tr千葉").hide();
          }
        });
      });
    });
  });
</script>

<body style="text-align:center;">
  <table id="testTable" border="1">
<tbody>
  <tr class="tr東京"><th class="th東京">関東</th><td class="row東京">東京</td></tr>
  <tr class="tr千葉"><th class="th千葉">関東</th><td class="row千葉">千葉</td></tr>
  <tr class="tr神奈川"><th class="th神奈川">関東</th><td class="row神奈川">神奈川</td></tr>
  <tr class="tr大阪"><th class="th大阪">近畿</th><td class="row大阪">大阪</td></tr>
  <tr class="tr兵庫"><th class="th兵庫">近畿</th><td class="row兵庫">兵庫</td></tr>
  <tr class="tr京都"><th class="th京都">近畿</th><td class="row京都">京都</td></tr>
</tbody></table>
<label><input type="radio" id="radio01" name="radios01" checked="checked" />表示</label>
<label><input type="radio" id="radio02" name="radios01" />非表示</label>
</body>
</html>