tableで色々やってみた

この記事は [株式会社Y's アドベントカレンダー](https://qiita.com/advent-calendar/2017/ysinc)12日目の記事です。

初めまして、フロントエンド1年目の@kahn_satoです。
javascriptのやりすぎでJQueryが抜けつつありますので、今回はJQueryなしということで。
若輩ながら、記事、書かせていただきやす。

※若輩すぎて言葉の定義が先輩方と違うやもしれません。
 その場合、至極優しく、「`xxx`は`yyy`っていうとわかりやすいよ」的なアドバイスくださいませ。。




# **ということで！！**
自分の思考回路も含めてさらしてみようと思います。
やりたかったのは、
・`table`に置いた要素を検索して、絞り込み
・`table`に新しい行を追加
の、２点。

# **やってみた。**
![スクリーンショット 2017-12-12 0.30.32.png](https://qiita-image-store.s3.amazonaws.com/0/217410/3d8bf763-6ed8-a624-557b-630ece8b81fb.png)

UIが死ぬほどシンプルなのは見た目にとらわれて欲しくないため。←
`tr`に`td`を3つという構造ぐらいしかいうことないですね。
まあ`HTML`や`CSS`は置いといて、大事なのは`JS`。
~~`ES6`に叩き直していただくのもありがたいなぁ〜←~~
こんな感じになりました。

```
var input      = document.getElementById('input');
var textValue  = input.getElementsByTagName('input');
var tbl        = document.getElementById('tbl');
var rows       = tbl.rows.length;
var td         = document.getElementsByTagName('td');
var notHitCols;

function boo() {
  var inputVal = textValue[0].value.toLowerCase();
  tbl.rows[0].style.display = 'none';

  for (var i = 1; i < rows; i++) {
    var cols = tbl.rows[i].cells.length;
    for (var n = 0; n < cols ; n++) {
      var cells    = tbl.rows[i].cells[n];
      var cellsTxt = cells.innerHTML.toLowerCase();
      if (cellsTxt.indexOf(inputVal) != -1 ) {
        cells.classList.add('hitters');
      } else {
        notHitCols = tbl.rows[i];
        notHitCols.style.display = 'none';
        cells.classList.remove('hitters');
      }
    }
  }
  for (var i = 0; i < td.length; i++) {
    if (td[i].classList.contains('hitters')) {
      td[i].parentNode.style.display = 'table-row';
      td[i].style.display            = 'table-cell';
    }
  }
}

var addNewElem = document.getElementsByTagName('textarea')[0];
var addNewCont = document.getElementsByTagName('textarea')[1];

function fooo() {
  var trLength        = rows;
  var addNewElemValue = addNewElem.value.toLowerCase();
  var addNewContValue = addNewCont.value.toLowerCase();

  var tr        = document.createElement('tr');
  var td1       = document.createElement('td');
  td1.innerHTML = trLength;
  tr.appendChild(td1);

  var items = {
    'td2' : addNewElemValue,
    'td3' : addNewContValue
  }
  var lists = ['td2', 'td3'];
  lists.forEach( function(value) {
    for (var i = 0; i < 1; i++) {
      var td2       = document.createElement('td');
      td2.innerHTML = this[value];
    }
    tr.appendChild(td2);
  }, items);
  tbl.getElementsByTagName('tbody')[0].appendChild(tr);
}
```

・`functon boo()`で検索して絞り込み。
・`function fooo()`で新規の行を追加。
という具合です。

# **kahn_satoの頭の中は、というと。**

## まずは`functon boo()`
やりたいことを言葉に並べて、整理してからスタートします。
・`<input type='text'>`の`value`を取得する
・取得した`value`が`table`の中にないか検索
・取得した`value`を含んでいる`tr`以外は非表示にする。
`functon boo()`はこんな感じ。
あとはひたすら`for`文回すってゆー愚かな構成ですが、確実。

### **ポイントになるのは**
1. 取得した`value`が含まれているか`if`文の条件分岐で判断して、`true`した`td`には`.hitters`を追加。`false`られたら`notHitCols`に`false`られた`td`を含む`tr`を入れて、それを`display:none;`！
2. 全部見終わったら、再度`td`の`length`だけ`for`文回して`.hitters`が追加されているものだけが表示されている状態に。
3. `<input type='text'>`の`value`が空白の状態で検索ボタンを押すと、`tr`が`display:'table-row';`に変更。`display:none;`されているのは`tr`なので、これでまた全部表示される。

## 次は`functon fooo()`
同じくやりたいことを言語化。今度は新規で`tr`を追加です。
・新規で`tr`と`td`3つを入れ子にして作る
・通し番号を1つ目の`td`に入れる
・`addNewElem`と`addNewCont`に入力された内容を各`td`に入れる
・`tr`を書き出すと、あら不思議。行が追加される。

### **ポイントになるのは（その２）**
1.また`for`文回すのだるくね、ってなったのでここで登場、`forEach`。便利です。引数苦手なぼくでも使える。便（ry
2.今回は1つずつしか`tr`が追加されない優しい設定のため、`tr`と1つ目の`td`に入れる通し番号は先に作成。
3.その後`forEach`を使って中身をぶち込んだ`td`をさらにあらかじめ用意して置いた`tr`に思い切りぶち（ry

# **出来上がり。**
果たして`forEach`使う意味があったのか等、諸々疑問は多いわけです。
ここはこうした方がいいとか、こうできる、とかの攻略法や選択肢が
頭に蓄積されてないなと最近思います。
色んなところで色んなコード書いて色んな人にレビューもらうのが、
一番早い成長なのかなと思います。
計画された偶発性理論はここでも役立つ。
学ぼうと思います。
ご指導ご鞭撻のほど、おねしゃす。

あ、パクるとは林先生に怒られるので、要注意です（身内ネタです）。


もうすぐ半分！
13日目 @h_plumさんにバトンタッチ！