テーブルから指定した行の値を取得したい

Question

  <table id="tbl1">
    <thead>
      <tr><th>列１</th><th>列２</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
    </tbody>
    <input type="submit" value=" ボタン"/>
  </table>
</body>
</html>

事前にJS側で、let tmp = 2;　と定義したものを使って
B2を取得したい場合JSのコードはどのように描けばよろしいでしょうか？

Comments

[x_x]

<input />がおかしなところにあって気になるので修正願います。

Answer 1

function A (table, x = 1, y = 1) {
  let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
  return table.querySelector (q).textContent;
}

console.log (A(document.querySelector('table'), 2, 2));

Answer 2

$(function() {
  let cellText = document.getElementById('tbl1').rows[tmp].cells[1].textContent;
  console.log(cellText);

  // jQuery
  cellText = $('#tbl1 tr').eq(tmp).find('td').eq(1).text();
  console.log(cellText);
});

Answer 3

<script>
window.addEventListener('DOMContentLoaded', function(e){
var tmp=2;
console.log(document.querySelector(`#tbl1 tbody tr:nth-child(${tmp}) td:nth-child(${tmp})`).textContent);
});
</script>
<table id="tbl1">
<thead>
<tr><th>列１</th><th>列２</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
</tbody>
<input type="submit" value=" ボタン"/>
</table>

Answer 4

tmp = 2というものが、何に対してのtmpなのか(列？行？）がはっきりしないので分かりませんが…
tmpが１ならばどのセル？３ならば？について考えると、考えやすいような気がします。
例えば、２列目のtmp行目を取得するというコードであれば下記のようになるのではないでしょうか。

    //行、列ともにカウントは1行目＝０、２行目＝１…となることに注意する
    let tmp = 2
    let rowData = document.querySelectorAll('tbody > tr')[tmp-1];
    let cellData = rowData.querySelectorAll('td')[1].innerText();
    console.log(cellData)

Comments

[x_x]

動作確認しましたか？

[KeijiKawashima]

動作確認しておりませんでした。。。
これでは、tdまで値の取得確認が進んでいませんしおかしな挙動となりますね。