1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【javascript】シンプルな動的tableのinputの値取得

Posted at

#やりたいこと

 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;
  
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?