#やりたいこと
table内のinputからの記事取得
下記参考でわかりやすく解説して下さってますが、inputと値が混同して条件分岐があったため、
ここではinputのみで、よりシンプルな例で解説しています。
###●ひとつ前の記事
javascriptでシンプルなtableの動的行追加・削除(ボタンクリックで行追加・削除)
###●参考
【JavaScript】テキストボックスを含むTableからテキストを取得する
#完成
二次元配列に値格納してます。二次元配列はconsoleからご確認下さい。
See the Pen table getdata by Hirofumi Sato (@hfmst) on CodePen.
#コード
前回との変更部分だけです。(input取得のみ)
行追加・削除は前の記事から確認ください。
js.html
//inputデータ取得
function getdt(){
let vals = []; //二次元配列の変数用意
let alltr = tbl.querySelectorAll('tr'); //すべてのtr取得➡alltrに代入。ここはヘッダーもふくんでます。
alltr.forEach(tr=>{ //alltrから一つずつ取り出してtrにいれて処理
let alltd = tr.querySelectorAll('td'); //trからtd全部取得
let arr =[]; //空の一次元配列を作成(←ここにおいて、forEachで毎回初期化します。
alltd.forEach(td=>{
arr.push(td.firstElementChild.value); //td一つずつ取り出し、値取得してarrにpush
})
vals.push(arr);
})
vals.shift(); //ヘッダー削除
alert(vals); //確認用
console.log(vals); //確認用
return vals;
}