この記事は 株式会社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文回すってゆー愚かな構成ですが、確実。
ポイントになるのは
- 取得した
valueが含まれているかif文の条件分岐で判断して、trueしたtdには.hittersを追加。falseられたらnotHitColsにfalseられたtdを含むtrを入れて、それをdisplay:none;！ - 全部見終わったら、再度
tdのlengthだけfor文回して.hittersが追加されているものだけが表示されている状態に。 -
<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さんにバトンタッチ！