javascript - テーブル内の行をループして入力をチェックする

Question

ユーザーがテーブルに行を動的に追加できるページがあります。各行には 3 つの入力フィールドが含まれます。テーブル内の各行 (1:n 行) をループする必要があり、各行の入力値を確認する必要があります。

各行の入力フィールドは次のとおりです: contactName、userName、accountName

各行について、これが私がやろうとしているチェックです。

contactName が null でない (値がある) 場合、userName と accountName の画像アイコンを「display: none」に設定したい

userName が null でない (値がある) 場合、contactName と accountName の画像アイコンを「display: none」に設定したい

accountName が null でない (値がある) 場合、contactName とユーザー名の画像アイコンを「display: none」に設定します。

したがって、基本的に、入力の 1 つに値がある場合、他の 2 つの入力フィールドの画像アイコンを非表示にしたいと考えています。

1 つの問題は、contactName フィールドと accountName フィールドの両方にデータを入力できることです。そのシナリオでは、accountName の画像アイコンを非表示にしたいと考えています。

次を使用して、テーブルの行をループする関数の作成を開始しました。

function checkParticipantRows() {
    alert("We are inside the checkParticipant Rows function");
    var table = document.getElementById('{!$Component.theForm.participantBlock.participantSection.participantTable}');
    var rowCount = table.rows.length;
    for(var i=0; i < rowCount; i++) {
        alert("We are looping over row number " + i);
        var cells = table.rows[i].getElementsByTagName("input");
        for(var x=0; x < cells.length; x++) {
            alert("We are looping over the rows input fields");
            alert(cells[x].getAttribute("value"));
        }
    }
}

入力を確認する方法に行き詰まっていますか? 各行の入力を参照するにはどうすればよいですか? 入力 ID は動的に生成されます。入力を行ごとに直接参照してから値を確認する方法はありますか?

動的に生成された 4 つの行を持つテーブルのページ ソースから生の html をいくつか含めました。

どんな助けでも大歓迎です。ありがとう！