私は Sage CRM をカスタマイズしているので、書かれた HTML を制御できず、CRM が出力するテーブル レイアウトに ID やクラスを追加できません。選択ドロップダウンのユーザー選択に基づいて、より高い (最上位ではない) レベルのテーブルを非表示にしたいと考えています。非表示にしたいテーブル内のテーブルのタイトル行にフックされたjQueryセレクターのみを取得できます。
DOM は次のようになります。
//Lots of other table structures above this in the DOM....
<table> <---- this is the table I want to show or hide based on the users selection
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class="PANEREPEAT"> <---- this is the node I can get selector to
Valuation information
////
だから私は以下のクライアント側のJavaScriptを行います:
var val_information_screen;
$('.PANEREPEAT').filter(function () {
//Find the valuation information screen
return $(this).text() == 'Valuation information';
}).each(function () { //iterate through all of these (there should only be one!)
val_information_screen = $(this);
});
var sel_ofee_type = $('#ofee_type');
if (sel_ofee_type.val() == '006') {
val_information_screen.closest('table').parents("table:first").show();
} else {
val_information_screen.closest('table').parents("table:first").hide();
}
それは機能しますが、特に美しいわけではありません。私が本当に嫌いなビットは以下です。jQueryを使用してDOMをトラバースするより良い方法はありますか?
val_information_screen.closest('table').parents("table:first").show();
val_information_screen.closest('table').parents("table:first").hide();