テーブルの複数の特定のセルが空欄かどうかを判別するコードを書きたい

Question

前提・実現したいこと

各行の一列目が空欄かどうかを判別する、コードを書きたいです。
詳しい実現したいことは、javascriptのコード内に文字をいれています。

現在のコードでは、３行とも１列目が空欄の時に処理がされます。
実現したいのは、上の行から一行ずつ一列目が空欄か判別し、その場所を特定することです。

出来れば各行の１列目の列のIDを全て書かずに、それぞれの一列目が空欄か確認したいです。

繰り返しを使うのか、$1stにテンプレート文字列で連番をつけるのかと
予想しましたが、上手く実現できませんでした。

お力添え願います。

該当のソースコード

  <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
        <tr>
            <th>番長</th>
            <th>相乗り１</th>
            <th>相乗り２</th>
            <th>相乗り３</th>
        </tr>

        <tr>
            <td id="1st1">sd</td>
            <td id="2nd1"></td>
            <td id="3rd1"></td>
            <td id="4th1"></td>
        </tr>

        <tr>
            <td id="1st2"></td>
            <td id="2nd2"></td>
            <td id="3rd2"></td>
            <td id="4th2"></td>
        </tr>

        <tr>
            <td id="1st3"></td>
            <td id="2nd3"></td>
            <td id="3rd3"></td>
            <td id="4th3"></td>
        </tr>

    </table>

      var emp = "";
//全ての行の一列目
      var $1st = $('[id^=1st]');
      console.log($1st);

      if($1st.text()===emp){
            console.log("空欄");
      }

イメージとしては、一行目一列目が空白なら、以下の処理。
一行目の一列目が既に埋まっていれば、二行目一列目が空欄が確認。
二行目一列目が空欄なら以下の処理。
そんな、コードが書きたいです。

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  var tds=[...document.querySelectorAll('table tr td:first-child')];
  var idx=tds.map(x=>x.textContent).indexOf("");
  console.log(idx<0?null:tds[idx]);
});

Comments

[hemuu]

ありがとうございます！
期待どうり、指定のセルを返すことができました！
いつも、本当にありがとうございます！

[hemuu]

ちなみに、indexOfの複数の文字列を指定してできる版のようなものはございますか？
””か"undefinedの時にそのindexを返すようにしたいです。
.searchがそれに当たるのでしょうか。

よろしければご教示いただければ幸いです。

Answer 2

当方、JavaScript勉強初めて半月の初学者ですので間違ってたらすみません。

あと、こちらの環境では「var $1st = $('[id^=1st]');」の時点で$使えないよエラーが出るので、質問者様はなんらかのフレームワークを入れていると思われます。
ですので、素のJavaScript処理で回答します。

以下のようにすべての行の最初の列を配列取得して、１つずつループして判定していくのはどうでしょう。

document.addEventListener("DOMContentLoaded",function(){
  //CSS の記載方法（セレクタ式）で、[id^='1st']の要素を全て取得する
  var firstColums = document.querySelectorAll("[id^='1st']");
  console.log(firstColums);

  //取得した要素数ループ
  for (const firstColumn of firstColums) {
  //要素のtextContent（要素の中身）が空白の場合はFalseとなるので、！つけて判定
    if (!firstColumn.textContent) {
      console.log(firstColumn.id + "：空欄");
      break;    //１つでも空白あればループ抜ける
    }
  }
},false)

出来れば各行の１列目の列のIDを全て書かずに、それぞれの一列目が空欄か確認したいとのことですので、id で要素取得したくないなら、最初の要素取得処理を以下のように「最初の子要素となるtdタグ」を指定してもいいと思います。
var firstColums = document.querySelectorAll("td:first-child");