JS(ES5)、jQueryによるHTMLタグの連続的な判定の方法と、SPAにおけるページ読み込み時のjQueryの発火方法

Question

前提

初めて質問をさせていただきます、よろしくお願いいたします。
SPAのシステム保守を行っている者です。

言語はJavascript(ES5)、及びjQuery3.4.1を用いて、
下記HTMLの構造で値が空である行(<tr>)に対し「display: none」を付与しようと考えています。

最低限の要件としてIE10への対応が必要です。

該当コード

※テーブルレイアウトですが、これの可否については目を瞑って頂けると幸いです。

<table id="oya">
  <tbody>
    <tr>
      <td class="row-title">行タイトル(残す行)</td>
      <td class="row-value">value</td>
    </tr>
    <tr>
      <td class="row-title">行タイトル(消す行)</td>
      <td class="row-value"></td>
    </tr>
    <tr>
      <td class="row-title">行タイトル(消す行)</td>
      <td class="row-value"></td>
    </tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

表示例

処理適用前

行名	値
名前	佐藤 圭太
性別
番号	0037301
出向予定
TOEICスコア

処理適用後例

行名	値
名前	佐藤 圭太
番号	0037301

具体的に分からないこと

質問事項は二つあります。

先ず発火条件ですが、「そのページを表示しきった直後」を想定しています。
しかしSPAである都合上「DOMContentLoaded」や「onClick」等は使用できない為、
「コード上でその処理に差し掛かった時」に発火させたいと考えていますが、
この方法だとid="oya"に対してthisから相対的に子要素などを指定できないのではないか、と詰まっています。

もう一方は、jsやjQueryを用いてid="oya"配下の<tr>の中身が空である、
もっと言えば<td class="row-value"></td>の中身が空の場合、
その親の<tr>にdisplay:none付与、という判定をするのはわかりますが、
それを各行それぞれに対して連続的に判定する方法が分からない、という状態にあります。

これらふたつのうち、どちらかについてでもご教示頂けると非常に有難いです。

補足情報

直接役に立たない情報かもしれませんが、FWはプロジェクト独自のものです。
それと、コロナの影響で出社が制限される都合で返信が遅くて来週以降となってしまうことをお詫び申し上げます。

追記1

＞ そもそもテーブル作る最中に除外すればいいだけでは?

当画面は「照会」モードと「更新」モードで使いまわされており、
テーブルを作る段階でタグを除外してしまうと片方のモードで正しく表示されないリスクが高いため、
display: none;による非表示を採用しようという結論に至った経緯があります。

そしてなるべくFWのコアな部分に手を入れることなく、
出来ればクライアント側で完結させたいという事情があります。

Comments

[退会済みユーザー]

そもそもテーブル作る最中に除外すればいいだけでは?

[Cya_IronBrain]

当画面は「照会」モードと「更新」モードで使いまわされており、
テーブルを作る段階でタグを除外してしまうと片方のモードで正しく表示されないリスクが高いため、
display: none;による非表示を採用しようという結論に至った経緯があります。

そしてなるべくFWのコアな部分に手を入れることなく、
出来ればクライアント側で完結させたいという事情があります。
(このコメントについては追記させていただきました)

Answer 1

先ず発火条件ですが、「そのページを表示しきった直後」を想定

SPA であれば、 HTML 内の #content など、「特定の wrapper が更新された後」となると思いますので、MutationObserver で変化を監視する方法もありそうですね。

追記）

最低限IE10への対応が必要

Stack Overflow Does IE10 support DOM4 Mutation Observers?
「No! IE11 から」らしいですので要件外ですね。

---

似たような方法に、Prototype.js の Event.observe があります。

jQuery とのコンフリクトを回避するために、読み込み順があります。

Answer 2

「コード上でその処理に差し掛かった時」に発火させたいと考えていますが、

ふつう、SPA側の仕組みにフックなりイベントなりが用意してあるものです（独自フレームワークでは詳細不明ですが）。

Answer 3

FWはプロジェクト独自のものです。

ページの移動くらい準備していそうな気がしますが、「よくわからんがとりあえず自分の書いたJavaScriptは実行できる」という状況であれば、無理やり動かすことができると思います。

window.addEventListener( 'scroll', () => {
  // 指定idの要素を探して消す作業をする
  // 消したことを当該idの要素にクラスとかで追加しておいて、2回以上は行わない
});

Answer 4

条件がいまいちわかりませんがこんな感じ？

$(function(){
  $('#oya tbody tr').has($('td.row-value').filter(function(){
    return $(this).text()=="";
  })).hide();
});

Comments

[Cya_IronBrain]

形は幾らか変えましたが、正に自分の知りたかったことに合致していたのでベストアンサーです！！
引数で無名関数を作ることが出来ることを失念していたため、同時に発火の問題も解決しました！