javascriptにて、ボタン押下時にtableの行要素を取得する方法

Question

javascriptについての質問です。

htmlで以下のような表を作成しました。

やりたいことは、列Dのボタン押下時、同じ行の要素を取得することです。
例えば、ボタン3押下時、「う」、「く」、「す」を取得したいです。

すみませんが、どなたかお教えいただけませんでしょうか。

以上、よろしくお願いいたします。

Comments

[m.ts10806]

htmlをご提示ください。また質問に至る前に何かしら調べてみたこと、やってみたことをご提示ください。（調べず・やってみていないのであれば、まず調べてやってみてから質問するのがこのサイトのルールです）このままでは「丸投げ質問」となり、回答が得られにくくなります。　https://teratail.com/help/question-tips#questionTips1-2

[yambejp]

「取得する」とは具体的にどうしたいのでしょうか？配列にセットしたい？クリップボートにコピーしたい？

Answer 1

テーブルタグでクリックイベントをリッスンし,イベントをキャッチしたらそのターゲットのクローセストテーブルロウを取得した後, そのチャイルドノードを取得すれば可能です.

table.onclick = e => (t => t.type == "button" && [].forEach.call(t.closest("tr").childNodes, el => el.querySelector("input") || console.log(el.textContent)))(e.target);

Comments

[Martinez4_46]

ご回答、ありがとうございました。

[defghi1977]

次回からはご自分のコードを掲載して下さい.
答える方としても, あなたのスキルの到達度を推し量ることができ, より的確な回答を提示できるようになります.

[Martinez4_46]

承知いたしました。
アドバイス、ありがとうございました。

Answer 2

document.querySelector('table').addEventListener('click', function(event) {
  const button = event.target.closest('[type="button"]');
  if (!button) {
    return true;
  }

  const tr = button.closest('tr');
  console.log(tr.cells[0].textContent, tr.cells[1].textContent, tr.cells[2].textContent);
  return true;
});

Element.closest() Polyfill
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill

Comments

[yambejp]

closest()は残念ながら実装が遅れたのでIEでは非対応ですよね
いまさらIE対応を目指す必要ないかもしれませんが

[x_x]

こういうのもあったので。
https://teratail.com/questions/105470
面倒でしれっと無視したコードを書くこともあります。

[Martinez4_46]

ご回答、ありがとうございました。

Answer 3

たとえばこう

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="button"){
    var a=Array.prototype.map.call(t.parentNode.parentNode.querySelectorAll('td'),function(n){
      return n.textContent;
    }).filter(function(v){
      return v!=="";
    });
    console.log(a);
  }
});
</script>

<table border>
<thead>
<tr><th>列A</th><th>列B</th><th>列C</th><th>列D</th></tr>
</thead>
<tbody>
<tr><td>あ</td><td>か</td><td>さ</td><td><input type="button" value="b1"></td></tr>
<tr><td>い</td><td>き</td><td>し</td><td><input type="button" value="b2"></td></tr>
<tr><td>う</td><td>く</td><td>す</td><td><input type="button" value="b3"></td></tr>
<tr><td>え</td><td>け</td><td>せ</td><td><input type="button" value="b4"></td></tr>
<tr><td>お</td><td>こ</td><td>そ</td><td><input type="button" value="b4"></td></tr>
</tbody>
</table>

Comments

[Martinez4_46]

ご回答、ありがとうございました。
やりたかったことが実現できました。