初めまして。
サブテーブルの任意のフィールドをDOM操作によって非表示にしたいと思い、以下の方法で非表示にすることができました。
しかし、レコード追加や編集時にテーブル追加ボタンを押すと、
一行目は非表示になっているものの、二行目、三行目には設定が反映されておらず困っています。
リンク先のコードをアレンジすることで、複数行の非表示は可能でしょうか？
よろしくお願い致します。
植栗さん
cstapの瀧ヶ平です。
リンク先の処理をレコード追加/編集時のフィールド値変更イベントで実行すれば可能かと思います。
ただ個人的にはこの場合はJavaScriptで処理をするよりもCSSの:nth-childセレクタを使った方が簡潔な処理になるかと思います。
植栗さん
同じくcstapの武井です。
先生に私のコードがディスられていますが、
ご提示のリンクの場合は詳細画面だけで消したいという要件なので、CSSではつらいでしょうね。（全画面で消えるから）
ただ、先生の言うnth-childを使うというのは妙手でしょう。
早速見習わせていただいて以下のようにしてみましたよ。
(function () {
"use strict";
kintone.events.on(['app.record.detail.show'], function (event) {
setInterval(function () {
if (location.href.indexOf("mode=edit") < 0) {
$('table tbody tr td:nth-child(3n)').hide();
}
}, 100);
});
})();
一旦これでご要件は満たせると思いますが、
このままだと永遠に回り続けるあまりよろしくないコードなので、
気になるようであれば、ぜひ自ら書き換えてみてください！！
瀧ヶ平さん武井さん、ありがとうございます。
レコード追加/編集時のフィールド値変更イベントにも処理を組み込んでいたのですが、出来ませんでした。
武井さんが載せて下さった例を参考にし、DOMではなくCSSによる非表示にすることは出来ましたが、
やはり二行目以降が表示されてしまいます。
植栗さん
できないことは分かりましたが、
どうしてできないかは植栗さんの環境次第なので何とも言えません。
（私のコードは私の環境で2行目以降の非表示を確認しています）
判断するには最低限以下の情報が必要です。
- アプリはどのようなフィールド構成か
- ソースはどのようになっているか
- ブラウザのコンソールでどんなエラーが出ているのか
植栗さん
武井さんの言われるように、table td 指定だとアプリのフィールド構成に影響を受けますので、影響を受けないようにしたほうがいいですね。
例えば、CSSでサブテーブルの２番目と３番目を非表示にする場合は、下記のようになります。
subtable-nnnnnn の部分は、DOM上でサブテーブルの class につけられた番号を指定してください。
subtable-nnnnnn を指定するのは、他にサブテーブルや関連テーブルがあっても影響を受けないようにするためです。
ただし、kintoneアップデートのクラス名変更等により動作しなくなる可能性があります。
nth-child(3n) とした場合は、対象が 3,6,9…番目の項目になりますが、項目数によっては、追加・削除ボタンが消えてしまうので特定の項目を指定したほうがいいと思います。
.subtable-gaia.subtable-nnnnn th:nth-child(2),
.subtable-gaia.subtable-nnnnn td:nth-child(2),
.subtable-gaia.subtable-nnnnn th:nth-child(3),
.subtable-gaia.subtable-nnnnn td:nth-child(3) {
display: none;
}
JavaScript でDOM操作する場合でも、同様のセレクタ指定で非表示にできると思います。
武井さん、rex0220さんありがとうございます。
武井さんの載せて下さったコードで、二行目以降の非表示がdetail、createのshowとchangeイベントでは出来るようになりました。
しかし、同じ内容でもeditでは非表示にならず、
また追加されたフィールドのテキストボックスの横幅がなぜか一行目の半分かそれ以下のサイズになってしまします。
1.アプリはどのようなフィールド構成か
サブテーブルの中身は
[文字列１] [文字列１] [ルックアップ] [文字列複数] [日付] [日付] [数値] [日付] [日付] [チェックボックス]
となっていて、太字のフィールドが非表示にするものです。
2.ソースはどのようになっているか
武井さんが載せて下さったものを参考にさせて頂き、
非表示にするフィールドを指定する部分を**[文字列１]**の時は’2’、
**[日付]の場合は’2’を’8’と’9’に、[チェックボックス]**の場合は’10’にしています。
setInterval(function () {
if (location.href.indexOf("mode=edit") < 0) {
$('table tbody tr td:nth-child(2)').hide();
}
}, 100);
ヘッダー部分は表示されたままだったのですが、
$('table:eq(0) thead tr th:eq(2)').hide();
と追加したらこちらも非表示になりました。
3.ブラウザのコンソールでどんなエラーが出ているのか
create,detail,editのshowイベントと、テーブルのchangeイベント時に上記の非表示処理が
実行されるようにしていますが、どのイベントの場合でもエラーは出ませんでした。
よろしくお願いします。
植栗さん
大前提として、こちらは与えられた情報でしか判断できないのです。
最初に提示された参考記事は、詳細画面のみでテーブル列を非表示にしたいという要望ですよ。
当初のご質問である「複数行非表示」をするための情報は既に上記までで出された各回答を見て判断できるレベルと思われます。
後出しで情報（条件）を出されると永久に終わらないと思います。
念のため書いておきますと、全画面で非表示にするのであればrex0220さんのおっしゃる方法が最適解です。
完全回答になってしまいますが、以下のCSSコードで実現できます。
.subtable-gaia.subtable-nnnnnnn th:nth-child(2),
.subtable-gaia.subtable-nnnnnnn td:nth-child(2),
.subtable-gaia.subtable-nnnnnnn th:nth-child(8),
.subtable-gaia.subtable-nnnnnnn td:nth-child(8),
.subtable-gaia.subtable-nnnnnnn th:nth-child(9),
.subtable-gaia.subtable-nnnnnnn td:nth-child(9),
.subtable-gaia.subtable-nnnnnnn th:nth-child(10),
.subtable-gaia.subtable-nnnnnnn td:nth-child(10){
display:none;
}
※nnnnnnnの部分はご自身でサブテーブルの要素を解析/置換してください。
ありがとうございました。
頂いたヒントやサンプルを元に、非表示化できるよう方法を探していきたいと思います。
植栗さん
お答えから察すると subtable-nnnnnnn の部分がわかりにくいようですね。
調査方法を説明するのは、面倒なので、 subtable-nnnnnnn を使わない別の指定方法を試してください。
CSS は、項目の指定方法がいくつもあります。たぶん、こちらのほうがわかりやすいと思います。
項目非表示用の JavaScript は、不要で、CSS のみの指定になります。
下記のCSSは、アプリ内の１番目のサブテーブルまたは関連テーブルの項目を非表示にします。
アプリ内にサブテーブルまたは関連テーブルが複数ある場合は、対象のサブテーブルが何番目かで
nth-of-type(1)の数字を変更してください。
2番目:nth-of-type(2), 3番目:nth-of-type(3)
table.subtable-gaia:nth-of-type(1) th:nth-child(2),
table.subtable-gaia:nth-of-type(1) td:nth-child(2),
table.subtable-gaia:nth-of-type(1) th:nth-child(8),
table.subtable-gaia:nth-of-type(1) td:nth-child(8),
table.subtable-gaia:nth-of-type(1) th:nth-child(9),
table.subtable-gaia:nth-of-type(1) td:nth-child(9),
table.subtable-gaia:nth-of-type(1) th:nth-child(10),
table.subtable-gaia:nth-of-type(1) td:nth-child(10) {
display: none;
}
この指定方法の場合、アプリ内のサブテーブルおよび関連テーブルの追加・削除により、
相対位置の変更があった時は、nth-of-typeの変更が必要です。