tableで色々やってみた

5658 ワード
新人プログラマ応援 JavaScript 学習 JavaScript テキストリンク

この記事は 株式会社Y's アドベントカレンダー12日目の記事です。

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

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

ということで！！

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

やってみた。

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とtd3つを入れ子にして作る
・通し番号を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さんにバトンタッチ！