Javascript テーブル

Question

htmlのtextデータをボタン一つでセルに挿入したいのですが以下のコードで間違っているところはありますか？

window.addEventListener('DOMContentLoaded', function(e){
  var data=["name","mailaddress","memo"];
  document.querySelector('#save').addEventListener('click',function(e){
    var t=document.querySelector('#list tbody');
    t.innerHTML="";
    t=t.appendChild(document.createElement('tr'));

    data.forEach(function(x){
      var td=document.createElement('td');
      var inp=document.querySelector('[name="'+x+'"]');
      if(inp.type=="radio") inp=document.querySelector('[name="'+x+'"]:checked');
			if(inp.type=="checkbox") inp=document.querySelector('[name="'+x+'"]:checked');
      td.textContent=inp==null?"":inp.value;
      t.appendChild(td);

    });
  });
});

Comments

[kei344]

HTMLも質問文に追記してください。

[noka_blank]

間違っているかどうかは動かしてみればわかると思います。
動かした結果動作しないならばその旨を、何かエラーが出ていればそれも追記いただけると、回答を得やすいと思います。

[m.ts10806]

これはデバッグ依頼ですよ。質問ではありません。

[m.ts10806]

再現しようにもこれだけでは誰も再現できませんしね。

Answer 1

checkbox は複数選択される可能性があるので、それでは不備。

if(inp.type=="radio") inp=document.querySelector('[name="'+x+'"]:checked');
if(inp.type=="checkbox") inp=document.querySelector('[name="'+x+'"]:checked');
は、評価後の処理が同じなので評価式にまとめる

「グローバル変数をあまり使わない」と思うのであれば document はグローバルです。
変数 e が未使用なのだからそこら document を探して使う

t.innerHTML="";
は、ちょい遅い

var td=document.createElement('td');
は、ちょい遅いのでループの外で定義して、中ではコピーして使う

--
[javascript セルについて]
https://teratail.com/questions/174042
これの内容と微妙に違うけど中身は同じ人でしょ！
せめて閉じてから次の回答するべし。
「聞くことを恥じ」と思っているからこその名前をころころ変えるんでしょ？
もっと自分に自信を持てよ！
聞くことは恥でもない。

Comments

[m.ts10806]

それが本当なら同一人物による複数アカウント所持となって聞くことが恥とか以前にそもそも規約違反です。

[x_x]

> t.innerHTML=""; は、ちょい遅い
これより速い方法がありますかね？

[yambejp]

いまのソースでtrは複数存在しないので

var tr=t.querySelector('tr');
if(tr!==null) t.removeChild(tr);

してもいいですが、別にそこまでする必要あるかなと

[think49]

> これより速い方法がありますかね？
見たところ、1行-3列の固定なので、既存のtd要素ノードの子ノードを書き換えるだけで十分ですね。

[退会済みユーザー]

規約違反！規約違反！っていうからより反感するんだな。もしかすると褒めて伸びるタイプかもしれない。見た感じ、いろんなところからコードを寄せ集めてきて「これ良い感じじゃね？」「見てくれよ！」と思ったのではないかなと勝手に妄想した。なのでガッツんと超斜め上から申し述べてみた。
「あちゃ～」と思ったら何かしらのアクションを興すんでね？（ほらね、回答の評価がダウン）
--
＞ちょい遅い、これより速い方法がありますかね？
プロフにもかいたが、私に質問しないでね
https://jsperf.com/innerhtml-vs-removechild/157
--
>別にそこまでする必要あるかなと
>子ノードを書き換えるだけで十分
最速・最良のコードを探求するお人よしではなかったのか？（悪意はないよ）
--

[退会済みユーザー]

function a () {
while (box.firstChild)
box.removeChild(box.firstChild);
}

function b () {
while (box.hasChildNodes ())
box.removeChild (box.firstChild);
}

function c () {
for (let e; e = box.firstChild; )
box.removeChild (e);
}

function d () {
for (let e; e = box.firstChild; e.remove ()) ;
}

function e () {
box.innerText = '';
}

e が速かった。

[m.ts10806]

ていうから、というか、明確に規約違反と謳われている行為をしているとしたら褒める以前の問題。
https://teratail.com/legal
> 第7条（禁止事項）
> (11)複数のユーザーIDを1人で保有する行為

赤信号渡ろうとしている子供とかお年寄りを助けるのとはまた違いますよ。

[退会済みユーザー]

本来の回答から離れてしまい、私がベストアンサーをもらえなくなるじゃないですか！

[miyabi_pudding]

ベストアンサーが目的なんですか？
それはあくまで結果であって目的にすべきではないような・・・。
質問者さんの質問を解決するのが目的であって、
ベストアンサーは、副次的な結果にすぎないと思いますよ。

コメントにおいての、回答に対しての質問は、
回答した方ないし、他に同じ技術を考えていた方も、正当回答に導き、
みんなで正しい技術を共有しあえる大事なことになると思います。
なので、もし自分が間違った回答をしていたなら、真摯に受け止めるべきではないでしょうか。

[退会済みユーザー]

みんな真面目だね～。字面だけで怒りなさんなって。なんで心意が読めないのかね。
ベストアンサーなんて私にとってどうでもいいこと。
現にほぼ回答はコードだけ書いていることが多い
そしてここで自分の放ったイヤミを解説しなきゃだめなのか・・・。
やっぱりこれからは、コードだけ書く。
--
ここで私は間違った回答をし、誤った方向へと導いたと？
はて・・・。

Answer 2

チェックボックス対応

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var data=["name","postalcode","mailaddress","plan","opt","memo"];
  document.querySelector('#save').addEventListener('click',function(e){
    var t=document.querySelector('#list tbody');
    t.innerHTML="";
    t=t.appendChild(document.createElement('tr'));
    data.forEach(function(x){
      var td=document.createElement('td');
      var inp=document.querySelector('[name="'+x+'"]');
      if(inp.type=="radio") inp=document.querySelector('[name="'+x+'"]:checked');
      if(inp.type=="checkbox"){
        inp=document.querySelectorAll('[name="'+x+'"]:checked');
        td.textContent=inp==null?"":[].map.call(inp,function(x){return x.value}).join(",");
      }else{
        td.textContent=inp==null?"":inp.value;
      }
      t.appendChild(td);
    });
  });
});
</script>
<table id="editor">
<thead>
<tr>
<th colspan="2">必要事項を記入してください</th></tr>
</thead>
<tbody>
<tr><th>氏名</th><td><input type="text" name="name"/></td></tr>
<tr><th>郵便番号</th><td><input type="text" name="postalcode"/></td></tr>
<tr><th>メール</th><td><input type="text" name="mailaddress"/></td></tr>
<tr><th>プラン</th><td>
<label><input type="radio" name="plan" value="Aプラン">Aプラン</label>
<label><input type="radio" name="plan" value="Bプラン">Bプラン</label>
</td></tr>
<tr><th>オプション</th><td>
<label><input type="checkbox" name="opt" value="オプションX">オプションX</label>
<label><input type="checkbox" name="opt" value="オプションY">オプションY</label>
<label><input type="checkbox" name="opt" value="オプションZ">オプションZ</label>
</td></tr>
<tr><th>自由記述欄</th>
<td><textarea name="memo"></textarea></td></tr>
</tbody>
</table>
<div align="center">
<button id="delete">削除</button>
<button id="save" >申込</button>
</div>

<h1>申込完了リスト</h1>
<table id="list">
<thead>
<tr>
<th class="name">氏名</th>
<th class="postalcode">郵便番号</th>
<th class="mailaddress">メール</th>
<th class="plan">プラン</th>
<th class="opt">オプション</th>
<th class="memo">メモ</th>
</tr>
</thead>
<tbody>
</tbody>
</table>