動的に生成したテーブルの選択行の値の取得について

Question

実現したいこと

rowspanのある動的に生成したテーブルに対して、
クリックしたセル行のそれぞれの値を取得したいです。
例えば、黄の2行目の1列目のセルをクリックした場合、rowspanの値とテスト２の値を取得したいです。
2行目のtdタグにrowspanのタグがないので、取得可能でしょうか。

テーブルイメージ図

該当のソースコード

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 70%;">
    <tr>
      <td>赤 red</td>
      <td id="t1" rowspan="3">rowspan</td>
      <td>テスト1</td>
    </tr>
    <tr>
      <td>黄 yellow</td>
      <td>テスト2</td>
    </tr>
    <tr>
      <td>青 blue</td>
      <td>テスト3</td>
    </tr>
</table>

Answer 1

イメージ的にはこういうことでしょうか？
存在しないrowspan属性は「null」を得たいのか「1」としたいのか推敲してください

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<script>
document.addEventListener('click',(e)=>{
  const t=e.target.closest('td')
  if(t && t==t.closest('tr').firstElementChild){
    const v1=t.getAttribute('rowspan');
    const v2=t.closest('tr').lastElementChild.textContent;
    console.log([v1,v2]);
  }
});
</script>
<table style="width: 70%;">
    <tr>
      <td>赤 red</td>
      <td id="t1" rowspan="3">rowspan</td>
      <td>テスト1</td>
    </tr>
    <tr>
      <td>黄 yellow</td>
      <td>テスト2</td>
    </tr>
    <tr>
      <td>青 blue</td>
      <td>テスト3</td>
    </tr>
</table>

Answer 2

質問文にあるコードだけから考えると、DOM構造から地道にデータを得るしかないかと思います。

1. クリックされたセルから、所属する <tr> を得る
2. その <tr> の子供 <td> から「黄 yellow」「テスト2」を取得
3. その <tr> がテーブルの n 行目だとすると、テーブルの1〜n-1行目の<tr>に対して「rowspan でn行目までカバーしているセルがあるかどうか」を調べる

テーブルがJavaScriptで動的に生成されるものなら、その元となるデータを使って効率的に処理することが可能かもしれません。質問文にはどうやって動的生成しているかが書かれていないので、この方針への助言はありません。