0.はじめに
0-1.はじめに
Web開発をするならJavaScriptは触る。
これは避けられないことなんだよなぁ…
今回はモダンなJavaScriptでのDOM操作を可能な限り簡単に解説するよ。
「jQueryわからん」
「JavaScriptの基本を押さえたい」
「新人に１から教える時間がない」
そんな方向けの記事となってますよ。
0-2.効率よく学ぶためには？
使い方とまでは言わないけど
個人的にオススメしたい学習方法はこんな感じです。
・CodePenのサンプルを触る
・「大事な所だけ抽出すると」のコードを見て、ポイントを押さえる
---------------------ここまでを全チャプターおこなう---------------------
・CodePenサンプルをよく読む
・実際にコードを書いて動かす
・サンプルを改造する
この記事では「DOMを使えるレベルになる」がゴール。
記事で解説してないこともある。
「もっといい、やりかたがあるのに…」
そう思えた時がプログラマとして成長するきっかけになりますよ！
1.基本:HTMLの要素を取ってくる
1-1.idを指定して取ってくる
チェックボックスのON、OFFで「テスト」の色が変わる。
See the Pen textID by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！<!--変更したい要素-->
<p id="pText">テスト</p>
//idを指定して要素を取ってくる
let pText = document.getElementById('pText');
//色指定
pText.style.color = "red";
pText.style.color = "black";
input属性の解説やonイベントの解説は後々、出てくるよ
初心者は焦らず、「大事な所だけ抽出すると」をじっくり読んで
動作内容を確認してから進もうね
（どうしても…って方は、ココを見るといいですよ）
input属性のonイベント（クリックしたら、値が変更したら）の解説
→2-4
引数のthisってなに？って方は
→3-2
1-2.class、nameを指定して取ってくる
チェックボックスのON、OFFで
「テストAは赤,黒」「テストBは緑,黒」に色が変わる。
See the Pen textClass by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！<!--変更したい要素(クラス)-->
<p class="pText">テストA</p>
<p class="pText">テストB</p>
//classを指定して要素を取ってくる(配列)
let pText = document.getElementsByClassName("pText");
//色指定
pText[0].style.color = "red";
pText[1].style.color = "green";
/*.html
<input type="radio" name="testRadio" value="nomal">*/
//nameの指定ならこちら！これも配列の形になります。
let elements = document.getelementsbyname("testRadio");
1-3.要素の取得(親、兄弟、子要素の取得)
要素の取得、最後！
すべての要素にIDなりNameなり付けるのは、めんどくさい。
だけど、いじりたい…
そんな時に使えるよ。
サンプルは一か所だけidを付けてるよ。
要素ごとに背景色を変えています
See the Pen getNode by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//元
let me = document.getElementById("me");
//親
let parent = me.parentNode;
//自分の子(配列)
let children = me.children;
//兄(自分の一個上)
let previous = me.previousElementSibling;
//弟(自分の一個下)
let next = me.nextElementSibling;
/* 階層図
親
L兄
L自分
L自分の子
L弟
*/
//背景色を設定(例)
me.style.background = "#FFD5EC";
他にも要素の取得方法はあるけど
このレベルまでいけば取れない要素はないよ。
2.要素を操作しよう!
要素の取り方は大体わかったと前提でいきます。
（わからない方は1.を見返そう）
では、もっと要素をいじっていきましょう！
(「これ実務で使うだろ!!」ってヤツを中心に解説するね)
2-1.テキストの変更
チェックボックスのON,OFFを表示する
See the Pen changeText by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！//<p id="pText">
let pText = document.getElementById('pText');
//テキスト変更
pText.innerHTML="チェックボックスはONです"
2-2.テキストの表示、非表示
チェックボックスで表示、非表示を操作する
See the Pen textDisplay by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//<p id="pText">
let pText = document.getElementById('pText');
//テキスト表示
pText.style.display ="block";
//再表示時にデザインが崩れる場合はこっち
pText.style.display = "";
//非表示
pText.style.display ="none";
2-3.活性、非活性（操作の有効化、無効化）
チェックボックスがチェック時に活性
See the Pen textDisabled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//<input type="text" id="testText">
let testText = document.getElementById("testText");
//非活性
testText.disabled = true;
//活性
testText.disabled = false;
※タイプミスが多発するんだよなぁ…
disabled=無効化だからtrueで非活性になるよ
2-4.マウスオーバー（Onイベント処理）
onイベントの設定方法について。
onイベントって何？って方へ簡単に説明すると
その要素に変化があったら呼び出される処理だよ。
例えば「クリックされたら、値が変更されたら…など」
マウスポインタをpタグ,divタグに重ねると表示が変わります
See the Pen textMouseHover by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
<!--直接イベントを書く-->
<p id="pText" onmouseover="over(this)" onmouseout="out(this)">pTest</p>
<!--JSでイベントを書く-->
<div id="divText">divTest</div>
<!--
onmouseover:マウスが要素の上にある
onmouseout:マウスが要素の上にあったが外れた
-->
let divText = document.getElementById("divText");
/*イベントを書き込む(どっちのパターンでも動く！)*/
//パターン1
divText.addEventListener('mouseover',function(){over(this)});
divText.addEventListener('mouseout',function(){out(this)});
//パターン2
divText.onmouseover = function(){over(this);}
divText.onmouseout = function(){out(this);}
onイベント（今回だとonmouseover,onmouseout…他にもonclickなど）
コレを動かすには関数を呼び出す必要があるよ。
（pタグ,divタグ両方その形で書いてます）
また、引数にthisを渡す場合は
関数内で関数(this)を呼び出す必要があるよ。(.jsを参照)
※thisってナニ？って方は3-2で解説してるよ。
（めんどくさい。でも…仕方ないんだよ。英語の文法と同じ、考えたら負けです）
コレは好き嫌いになると思いますが、onイベント類を書く時。
私はサンプルのpタグと同じ形式であるHTML内で書く方が好き。
(要素を追加する場合は、JSで書かないとだけどねぇ… 4-2で解説)
最後にonmouseoverとonmouseout
こちら、両方の処理を書くこと。
onmouseoverのみだと変更した処理が残っちゃうから。
変更を元に戻すためにonmouseoutを呼び出してね。
3.ちょっと役立つコーディング技術
要素の追加とか、セレクトボックス、テーブルの解説に進む前に
ちょっと役立つコーディング技術を説明するね。
3-1.複数要素を一括で処理する
要素を選択して変更するのが基本だけど、例えば非活性。
1,2個なら楽だけど…コレが10個以上、非活性にする場合
var element1 = document.getElementsById("element1");
var element2 = document.getElementsById("element2");
//この後もidを指定して変数に入れていく
element1.disabled = true;
element2.disabled = true;
//この後も非活性を書いていく
非常にめんどくさい
document.getElementsByName(name)で取ってくるのも手だけど
非活性の場合、いろんなinput属性をもつ要素を扱うので
それも厳しい…
そんなときに使えるのはコレ！「配列に入れて、一括処理する」
ではサンプルをどうぞ
チェックボックスで活性、非活性を変更する
See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//一括で操作したいElementオブジェクトを入れる
let elements = [];
//一括で操作したいelementのid名
let elementsId = ["testText","testColor","testRange"];
//要素を取ってきて配列に入れ込む
for(let i=0; i<elementsId.length; i++){
let element = document.getElementById(elementsId[i]);
//末尾に追加
elements.push(element);
}
//一括非活性
for(let i=0; i<elements.length; i++){
elements[i].disabled = true;
}
同じElementオブジェクトなのでfor文で一括処理できるぞ。
今回は3つの要素を一括で操作したよ。
一括で操作したい要素が多くなったら、便利さが心で理解できるはず！
また今回はそれぞれの要素を配列だけに持たせたけど…
input属性はそれぞれ一個づつ変数に入れる。
その後に配列に格納することをオススメするよ。
「一か所のみ変更したいけど…要素番号どれだっけ？」
ってなるからね。
3-2.同じ関数を使いまわしたい！
例えばボタン
押したボタンは、どれか判定したいって時がありますよね。
他にもinput属性だったら
「変更したものの値を知りたい」って時あるよね。
その時、呼び出す関数を1つ1つ書く？
また、その中で要素を指定して変更処理を書く？
//<input type="button" id="buttonA" onclick="buttonClickA()">
//<input type="button" id="buttonB" onclick="buttonClickB()">
//<input type="button" id="buttonC" onclick="buttonClickC()">
function buttonClickA(){
let buttonA = document.getElementById("buttonA");
//要素を指定して変更処理を書く
}
function buttonClickB(){
let buttonB = document.getElementById("buttonB");
//要素を指定して変更処理を書く
}
function buttonClickC(){
let buttonC = document.getElementById("buttonC");
//要素を指定して変更処理を書く
}
非常にめんどくさい…
そんなときに使えるのが引数にthisを渡す
これで、どのボタンから関数を呼び出したかが分かるよ
サンプル：押したボタンの値とidを表示する
（IDは分かりやすいように名前に違和感を持たせてます）
See the Pen functionThis by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
HTMLを見れば分かると思うけど、onclickで呼び出されている関数
これは全てのボタンがclickButton(this) になってるね。
では気になるclickButton(this)の中身は？
function clickButton(element){
pTest.innerHTML = "押したボタン:"+element.value+"<br/>押したボタンのID:"+element.id;
}
呼び出した要素のvalueとidを取ってきて表示させてるだけね。
関数内でボタンの要素をgetElement~で取ってきてないね。
このthisをうまく使えば、もっと複雑な処理を自由に書けるよ。
例えば、条件に達した場合に非活性にするとかね。
（input属性の解説では当たり前のようにthisを使っていきます）
いっぱいコード書いて慣れよう！
4.要素を追加、削除
ユーザー操作によっては入力する場所が増える
なんなら可変で増える場合もあるし、削除するときもあるね。
そんな時、困らないように勉強していこう！
4-1.要素を追加する
まずは追加の基礎から
ボタンクリックでpタグを最大3個追加する
See the Pen addPtag by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//追加先divタグ
let setPTag = document.getElementById("setPTag");
//pタグを追加してある箇所
//pタグを生成
let pElement = document.createElement('p');
//追加先を指定して末尾にpタグを入れる
setPTag.appendChild(pElement);
//先頭に指定したい場合は
setPtag.prepend(pElement);
document.createElement()は要素を指定して生成してるね。
divとかtrなどを指定して使うから覚えておこう。
（他サンプルでも別の要素を指定して使ってます）
サンプルをよく読めば分かると思いますが、生成後
idやCSSを設定して末尾に追加してるんだよね。
余裕がある方は、ぜひサンプルコードを読んでね。
4-2.要素を追加(onイベントも設定する)
ボタンクリックでinput type="text"を最大3つ追加
追加したinput属性にoninputイベント追加(pタグで入力値とIDを表示)
See the Pen addInput by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//inputタグを生成
let inputElement = document.createElement('input');
//inputタグのタイプを指定
inputElement.type = "text";
//oninputイベントを追加
inputElement.oninput = function(){inputDraw(this);}
4-3.要素の追加、前後
要素の追加、ある程度理解できたと思うけど、コード読んでる方
こう思ってない？
「親を指定（divとか）して追加がルールなのか」っと
結論、親がなくても追加できるぞ。
ではサンプルを見ていこう！
ボタンクリックでpタグの前後に要素を追加します
See the Pen addBeforAfter by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//基準に使います
let testP = document.getElementById("testP");
//要素の追加
let pElement = document.createElement('p');
//基準の前に追加
testP.before(pElement);
//基準の後ろに追加
testP.after(pElement);
4-1,3まとめ. 要素の追加(4パターン)
項目を行ったり来たりするの大変だと思ったので
こっちに、まとめるよ
要素を追加する4パターン
See the Pen addElements by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
/*.html
<div id=me>
<div>children</div>
</div>
*/
//追加先の指定
let me = document.getElementById("me");
//生成
let divTag = document.createElement("div");
//meの前
me.before(divTag);
//meの後ろ
me.after(divTag);
//親を指定して先頭に追加
me.prepend(divTag);
//親を選択して末尾に追加
me.appendChild(divTag);
4-4.要素の削除(一か所だけ)
ボタンクリックで先頭のpタグ(pId0)を削除します
See the Pen removeP by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//pタグを生成
let pTag = document.createElement('p');
//末尾に生成したpタグを追加(bodyの末尾)
document.body.appendChild(pTag);
//削除対象の要素を取ってくる
let child = document.getElementById("pId0");
//削除(bodyの中にある削除対象を削除)
document.body.removeChild(child);
今回はpタグをbodyの末尾に追加する形にしましたが、あまりオススメしないなぁ…
理由は次(4-5)で説明するね。
4-5.要素の一括削除
さっきは一か所のみを削除したけど
全部削除したい場合は、コレを使おう！
ボタンクリックでpタグを一括削除する
See the Pen removePtags by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//pタグが入ってるdiv
let setP = document.getElementById("setP");
//div削除(中のpタグも一緒に消える)
setP.remove();
もし4-4で削除処理をdocument.body.remove();にすると、どうなる？
ボタン含めて、すべての要素が消えるぞ（真っ白画面になる）
要素を削除する前提で作るならdivの中に書こう
divがなければ…
div生成→divの中に追加したいものを生成、追加→divを追加
5.CSS、スタイルの追加、切り替え
今までのサンプルにも記述内容を説明したけど、もっと知りたい方向け。
より詳しくCSS、スタイルの変更を見ていこう！
5-1.CSSを切り替える
ボタンクリックでクラスを切り替える(追加、変更)
赤文字→太字に、青文字→緑に、緑→デフォルトに戻す
See the Pen changeClassName by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//変更対象
let testP = document.getElementById("testP");
let testP2 = document.getElementById("testP2");
let testP3 = document.getElementById("testP3");
//CSSで指定したクラスを複数適応させる
testP.className = "red bold";
//クラスの変更
testP2.className = "green";
//クラスの削除
testP3.className = "";
5-2.べた書きでスタイルを変更する
ボタンクリックでCSSを変更する
赤文字→デフォルトに戻す、青文字→枠線を消す、緑→太くする
See the Pen changeStyle by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//変更対象
let testP = document.getElementById("testP");
let testP2 = document.getElementById("testP2");
let testP3 = document.getElementById("testP3");
//追加するスタイルの基本
let CssText = "margin-top:5px; margin-bottom: 5px; paddling:0px; border:solid;";
//スタイルを適応させる
testP.style.cssText = CssText + " color:red";
//スタイルを全削除
testP.style.cssText = "";
//スタイルの一部を削除する
testP2.style.border = "";
//スタイルの一部を変更する
testP3.style.fontWeight = "bold";
注意が必要なのは一部変更
.CSSならfont-weightがJS側ではfontWeightになるんだよね。
他にもmargin-topなども同様にmarginTopが正しい記述となってるぞ。
6.ラジオボタン
ここからは、ユーザー入力でよく使うものを解説していくね。
実務でよく使うだろうなというモノを中心に解説していくぞ。
input属性のbutton、text、checkboxは
今までのサンプルで取り上げているので今回はスルー。
（サンプルコードを読めば理解できるようにしてるから）
※サンプル内ではname属性を指定してないよ（書く量を減らすため）
バックエンドに値を渡す場合は、必ず記述してね。
書かないと、バックエンド担当の方から、ぶん殴られますよ。
6-1.値の取得
チェックしたラジオボタンの値を表示する
See the Pen testRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*.html
ラジオボタンにonchangeイベントを設定
<input type="radio" name="testRadio" onchange="radioChange(this)" value="nomal">
*/
//値を表示する箇所
let testP = document.getElementById("testP");
//onchangeイベントで呼び出す関数
function radioChange(element){
//チェック中のものが対象
if(element.checked){
//element.value = ラジオボタンの値
testP.innerHTML = "選択したのは：" + element.value;
}
}
//--------------------------------------------------------
/*checkboxについて
対象にしたいcheckbox <input type="checkbox" id="testCheckbox">
checkboxもラジオボタンと同じで.checkedでチェック判定ができます*/
document.getElementById("testCheckbox").checked;
//(true or false)
6-2.選択肢の追加
ボタンクリックでラジオボタンを追加
チェックしたラジオボタンの値を表示する
See the Pen addRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*.html
ボタンにonclickイベントを設定
<input type="button" onclick="clickButton(this)" value="ラジオボタン追加" style="margin-bottom:10px">
*/
//ラジオボタン要素がすべて入ってる配列
let testRadio = document.getElementsByName("testRadio");
//ボタンのonclickで呼び出される関数
function clickButton(element){
//今回生成する要素 <label><input type="radio">text</label>
//まずはラベルを生成、設定
let labelTag = document.createElement("label");
labelTag.innerHTML = "下位";
//ラジオボタンの生成、設定
let inputTag = document.createElement("input");
inputTag.type = "radio";
inputTag.name = "testRadio";
inputTag.value = "subordinate";
//onchangeイベントを設定
inputTag.onchange = function(){radioChange(this);}
//ラベルの先頭にラジオボタンを入れる(子要素)
labelTag.prepend(inputTag);
/*ラジオボタン（一般）の前に追加
<label><input type="radio"></label>
正しく追加するために
testRadio[0]の親要素(<label>)の前に追加する必要がある
*/
let setLabel = testRadio[0].parentNode;
//生成したラベル+ラジオボタンをラベルの先頭に追加
setLabel.before(labelTag);
}
ちなみにラジオボタンを追加した後testRadioは更新されてるぞ！
詳しく見た方はサンプルコードでconsole.logを出してるから
そちらで確認してね。
6-3.初期状態に戻す
ボタンクリックで初期化（チェックを外す）
See the Pen initializeRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
/*.html
ボタンにonclickイベントを設定
<input type="button" onclick="clickButton(this)" value="ラジオボタン追加" style="margin-bottom:10px">
*/
//ラジオボタン要素がすべて入ってる配列
let testRadio = document.getElementsByName("testRadio");
//ボタンのonclickで呼び出される関数
function clickButton(element){
//すべてのラジオボタンのチェックを外す
for(let i=0; i<testRadio.length; i++){
testRadio[i].checked = false;
}
}
6-4.選択肢を減らす
チェックボックスの状態によって下位が選べなくなる
See the Pen unselectedRadio by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*.html
チェックボックスにonchangeイベントを設定
<input type="checkbox" onchange="changeCheckBox(this)">
*/
//ラジオボタン要素がすべて入ってる配列
let testRadio = document.getElementsByName("testRadio");
//画面表示用
let testP = document.getElementById("testP");
//チェックボックスのonchangeで呼び出される関数
function changeCheckBox(element){
//※ラベル要素を取ってくる
let parent = testRadio[0].parentNode;
if(element.checked){
//選択不可に
testRadio[0].disabled = true;
//非表示対象だったら表示を初期化する
if(testRadio[0].checked){
testP.innerHTML = "選択したのは：";
}
//チェック状態を切る
testRadio[0].checked = false;
//非表示
parent.style.display ="none";
}else{
//初期状態に戻す
testRadio[0].disabled = false;
parent.style.display ="";
}
}
/*※対象となるindexを求める(べた書きしないパターン)
let parent = testRadio[disabledIndex].parentNode;*/
let disabledIndex;
for(let i=0; i<testRadio.length; i++){
if(testRadio[i].value == "subordinate"){
//対象となるindex
disabledIndex = i;
break;
}
}
7.セレクトボックス
こちらもよく使うと思うから解説。
慣れておくと出来ることが広がるのでぜひ、頑張って学習しようね。
7-1.値の取得
セレクトボックスで選択中のindex、値、テキストを表示
See the Pen testSelect by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*.html
onchangイベントを設定
<select onchange="changeSelect(this)"></select>
*/
//onchangeイベントで呼び出される関数
function changeSelect(element){
//index(0からカウント)
let index = element.selectedIndex;
//表示テキスト
let selectOption = element.options[index].text;
//値
let value = element.value;
}
テキスト表示は
選択中のセレクトボックスの要素番号を取得
→要素番号を使って表示中のテキストを取得
この流れになってますね。
注意してね。
7-2.選択項目を追加
ボタンクリックで項目に「下位」を追加
See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*ボタンにonclicイベントを設定
<input type="button" onclick="clickButton(this)" value="項目追加" style="margin-bottom:10px">
*/
//いじりたい要素
let testSelect = document.getElementById("testSelect");
//ボタンのonclickイベントで呼び出される関数
function clickButton(element){
//生成
let option = document.createElement("option");
//値を設定
option.value="subordinate";
//テキストを設定
option.text="下位";
//「ランクを選んでください」の下に追加
testSelect.options[0].after(option);
}
7-3.初期化
ボタンクイックでセレクトボックスを初期状態にします
See the Pen resetSelect by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*ボタンにonclicイベントを設定
<input type="button" onclick="clickButton(this)" value="項目追加" style="margin-bottom:10px">
*/
//いじりたい要素
let testSelect = document.getElementById("testSelect");
function clickButton(element){
//先頭を選択状態に
testSelect.selectedIndex = 0;
//先頭から入力値として設計しているなら(セレクトボックスが「一般」から始まる場合)
testSelect.selectedIndex = -1;
}
ちなみに
selectedIndex = -1にすると
セレクトボックスが空白状態になるぞ。
7-4.選択肢を減らす
チェックボックスの状態によって下位が選べなくなる
See the Pen Untitled by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
/*.html
チェックボックスにonchangeイベントを設定
<input type="checkbox" onchange="changeCheckBox(this)">
*/
//いじりたい要素
let testSelect = document.getElementById("testSelect");
function changeCheckBox(element){
if(element.checked){
//現在、選択中のindex
let index = testSelect.selectedIndex;
//※pタグの表示を初期化するか？
if(index == 1){
testP.innerHTML = "index:<br/>値:<br/>テキスト:";
testSelect.selectedIndex = 0;
}
//非表示、非活性
testSelect.options[1].disabled = true;
testSelect.options[1].style.display = "none";
}else{
//もとに戻す
testSelect.options[1].disabled = false;
testSelect.options[1].style.display = "";
}
}
//※非表示にするindexを値から取得する
//pタグの表示初期化判定を変数のみで扱える if(index == disabledIndex)
let disabledIndex;
for(let i=0; i<testSelect.length; i++){
if(testSelect.options[i].value == "subordinate"){
//対象のindex
disabledIndex = i;
break;
}
}
8.表
表もよく使うから、ここも気を抜かずに勉強しようね。
8-1.表の行、セルを取得
指定した行とセルの色を変更する
See the Pen testTable by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//要素を取得
let testTable = document.getElementById("testTable");
//行を指定して背景色変更
testTable.rows[1].style.background = "#f56565";
//セルを指定して背景色変更
testTable.rows[0].cells[0].style.background = "#85ed85";
8-2.セルにonイベントを指定
マウスオーバーでセルのテキストを取得して表示
See the Pen tableOnmouseover by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//要素を取得
let testTable = document.getElementById("testTable");
//for文で回してonイベントを指定していく
//表の行数を取得 testTable.rows.length
for(let i=0; i < testTable.rows.length; i++){
//行を指定して列数を取得 testTable.rows[i].cells.length
for(let j=0; j < testTable.rows[i].cells.length; j++){
testTable.rows[i].cells[j].onmouseover = function(){over(this);}
testTable.rows[i].cells[j].onmouseout = function(){out(this);}
}
}
8-3.行の追加
ボタンクリックで行を追加します
See the Pen addRow by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//要素を取得
let testTable = document.getElementById("testTable");
//末尾に行を追加
let tr = testTable.insertRow(-1);
//末尾にセルを追加
let cell = tr.insertCell(-1);
//場所を指定して行を追加（0からスタート）
tr = testTable.insertRow(0);
//場所を指定してセルを追加(0からスタート)
cell = tr.insertCell(-1);
8-4.行の削除
ボタンクリックで行を削除
See the Pen deleteRow by DoNotPrayDebug (@DoNotPrayDebug) on CodePen.
大事な所だけ抽出すると！
//要素を取得
let testTable = document.getElementById("testTable");
//行を指定して削除
testTable.deleteRow(0);
//行の末尾を非表示
testTable.rows[testTable.rows.length - 1].style.display = "none";