テーブルを弄る。その２

JavaScript

> 何か JS 1.8「らしく」ないと言うか…

らしくないように、確かに見えました。
「let」 or 「var」 の使い方というか。
gtlt さんに指摘されて考えたさぁ〜
JS 1.8 にするか、もしくは、従来の方法に戻すか。
迷ったあげく、答えは JS 1.8。
（そうそう、教えてgoo のサンプルには、久慈市に天然ホヤとしましたが、我が町の方が美味しい）
そうそう、その２　 visibility: collapse; の「意」がわかりました。こっちですね。

<!DOCTYPE html>
<title></title>

<style type="text/css">
tr[aria-hidden="true"] {
  visibility: collapse;
}
</style>
<form>
  <p>
    <input type="button" value="reset" onclick="table && table.reset ()">
    <select onchange="table && table.find(new RegExp( this.value ), 1)">
      <option value="">-
      <option value="岩手">岩手県
      <option value="青森">青森県
    </select>
    <select onchange="table && table.find(new RegExp( this.value ), 2)">
      <option value="">-
      <option value="市">市
      <option value="町">町
    </select>
    <select onchange="table && table.find(new RegExp( this.value ), 3)">
      <option value="">-
      <option value="おいしい">おいしい
      <option value="おしい">おしい
      <option value="お.*しい">お＊しい
    </select>
    
  </p>
</form>

<table border="1" id="hoge">
  <thead>
    <tr>
      <th>No
      <th>Prefecture
      <th>Cities
      <th>Comments
  </thead>
  
  <tbody>
    <tr>
      <td>1
      <td>岩手県
      <td>洋野町
      <td>ウニがおいしい
      
    <tr>
      <td>2
      <td>青森県
      <td>八戸市
      <td>イカがおいしい
    
    <tr>
      <td>3
      <td>岩手県
      <td>久慈市
      <td>美しすぎる海女さんで、おしい
    
    <tr>
      <td>4
      <td>青森県
      <td>八戸市
      <td>美しすぎる市議会議員で、さわがしい

    <tr>
      <td>5
      <td>岩手県
      <td>洋野町
      <td>鮑がおいしい
      
    <tr>
      <td>6
      <td>青森県
      <td>八戸市
      <td>B級グルメ「せんべい汁」がおいしい
    
    <tr>
      <td>7
      <td>岩手県
      <td>洋野町
      <td>天然ホヤがおいしい

</table>

<script type="application/javascript; version=1.8">
(function () { // Asymmetrical JavaScript Abridgment Exclusively

  var getTR = // tr を集める
    (function (collect)
      function (table)
          Array.reduce (table.tBodies, collect, []))

    (function (result, tbody)
      result.concat (Array.slice (tbody.rows, 0)));


  var ariaHidden = // mode によって、それようの関数を返す
    function (mode)
      let (state = String (!!mode))
        function (tr) tr.setAttribute ('aria-hidden', state);

//____________


  var TableViewer = function (node) { // オブジェクト
    this.table = node;
    this.reset ();
  };


  var reset = // 初期化。すべて表示にする
    function ()
      (Array.forEach (getTR (this.table), ariaHidden (false)), this);


  var limit = // 表示数の制限をする
    function (n)
      let (tr = getTR (this.table))
      let (after = Array.slice (tr, n))
        (Array.forEach (after, ariaHidden (true)), this);


  var reverse = // 表示状態を反転する
    (function (toggle)
      function ()
        (Array.forEach (getTR (this.table), toggle), this))

    (function (tr)
      tr.setAttribute ('aria-hidden', String (tr.getAttribute ('aria-hidden') === 'false')));



  var find = // 検索
    (function (checker, setter)
      function (reg, index)
        (Array.forEach (getTR (this.table), checker (reg, index, setter)), this))
    
    (function (reg, index, setter)
      'undefined' === typeof index // index により用途に合った関数を返す
        ? function (tr) (! reg.test (tr.textContent)) && setter (tr) // 行全体で検索
        : function (tr) (! reg.test (tr.cells[index].textContent)) && setter (tr), // セル単体で検索

     ariaHidden (true)); // = setter 非表示用の関数にする
  

  var create =
    function (table)
      ('tagName' in table && 'TABLE' === table.tagName)
        ? new TableViewer (table)
        : null;

//____________

  TableViewer.prototype.reverse = reverse;
  TableViewer.prototype.reset = reset;
  TableViewer.prototype.limit = limit;
  TableViewer.prototype.find = find;

//____________
  this.createTableViewer = create;

})();

var table = createTableViewer (document.getElementById ('hoge'));
</script>