新規投稿
フォローする

テーブルの非表示について

お世話になっております、Joanです。

詳細と印刷画面(編集と作成画面には表示する)で特定なテーブルの一列目を非表示にしたいですか、

以下の投稿を参考しているか、うまく作動しませんでした。

印刷画面でテーブルの一部を非表示にできますか?

テーブル項目の非表示について

以下一部のコードを添付します。

(function() {
"use strict";
kintone.events.on(["app.record.detail.show","app.record.print.show"], function(event) {
document.getElementById('record-gaia').classList.add('xxx-show');
return event;
});
})();
.xxx-show .subtable-gaia.subtable-5520976 th:nth-child(1),
.xxx-show .subtable-gaia.subtable-5520976 td:nth-child(1) {
display: none;
}

追記、

テーブルは全部で8個あります、その内6個の一列目(チェックボックス)を非表示にしたい。

詳細画面と印刷画面だけです。詳細画面だけダメだったらせめて印刷画面には非表示したいです。

 

0

19件のコメント

Avatar
erika

Joan様
はじめまして。
CSSのサブテーブルを示すクラスが違うのではないでしょうか?
2番目の参考サイトの方に下記のように記載がありました。

「追加・編集・詳細画面で共通のサブテーブルを示すクラス subtable-gaiaを指定します。」

.xxx-show .subtable-gaia th:nth-child(1),
.xxx-show .subtable-gaia td:nth-child(1) {
display: none;
}

一度お試し頂ければと思います。

0
Avatar
J

erika様

ご回答ありがとうございます。

それだとすべてのテーブルの一列目か非表示になります、

特定なテーブルだけ非表示にしたいです。

Jにより編集されました
0
Avatar
erika

Joan様
ご質問内容は列(縦)を非表示にしたいと記載がありましたが、
行(横)を非表示にしたいということでしょうか?
それとも複数テーブルがあって1つだけを残してあとは非表示にしたいのでしょうか?
ご質問があいまいでわからないです;

行を非表示にしたいのならCSSで単純に下記でどうですか?

.xxx-show .subtable-gaia tr:nth-child(1)

テーブル自体を非表示にしたいならjavascriptで下記でできます。
kintone.app.record.setFieldShown('テーブル名', false);

0
Avatar
J

erika様

すみません、縦の方です、一列目を非表示にしたいです。

度々ありがとうございます。

0
Avatar
J

テーブルは全部8個あります、

そのうちの6個のテーブルの一列目(採番)は非表示したい。

0
Avatar
erika

joan様
こういうことですか?


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

erikaにより編集されました
1
Avatar
J

あ、はいそうです!

1
Avatar
erika

なるほど!理解が悪くてすみませんでした。。
CSSの記載がちょっと足りなかっただけです!

.xxx-show .subtable-gaia.subtable-xxxxxxx th:nth-child(1),
.xxx-show .subtable-gaia.subtable-xxxxxxx td:nth-child(1) {

display: none;
}
0
Avatar
J

erika様

度々ありがとうございます!

やってみたかうまく作動はしていませんでした…

(function() {
"use strict";
kintone.events.on("app.record.print.show", function(event) {
document.getElementById('record-gaia').classList.add('xxx-show');
return event;
});
})();
.xxx-show .subtable-gaia.subtable-5520976 th:nth-child(1),
.xxx-show .subtable-gaia.subtable-5520976 td:nth-child(1) {
display: none;
}

JSとCSSは正しいとこアップしています!

0
Avatar
erika

joan様
見た感じコードは間違ってないように見えますね。
一応私のコードも載せておきますね!
後は他にカスタマイズしてたら競合してる可能性もあります!

JavaScript: 操作.js

(function() {
"use strict";
kintone.events.on(
[
'app.record.detail.show',
'app.record.print.show',

], function(event) {
document.getElementById('record-gaia').classList.add('xxx-show');
return event;
});
})();

CSS: sample1.css

.xxx-show .subtable-gaia.subtable-5529777 th:nth-child(1),
.xxx-show .subtable-gaia.subtable-5529777 td:nth-child(1) {
 display: none;
}
0
Avatar
J

erika様

ありがとうございます

他のカスタマイズと衝突する可能性がありますね、

少しDebugしてみます。

ちなみにerika様のテストによるとこれは編集画面や追加画面には非表示してますか?

予想はしないと思いますか

Jにより編集されました
0
Avatar
J

他のカスタマイズを削除しても、非表示はしていないね、

Consoleも何もない。

テーブルの番号はこれであってますかな?

0
Avatar
J

何度もすみません、もしかしてチェックボックスの問題ではないでしょか?

採番と言っても、フィールドはチェックボックスを使っています!

0
Avatar
erika

joan様
上記のカスタマイズでは、追加画面では表示してます。
編集・詳細・プレビューでは非表示になってますね。
app.record.detail.showを外せば、追加・編集・詳細画面で表示され、
プレビューでは非表示になってます。

erikaにより編集されました
0
Avatar
J

erika様

なるほど、ありがとうございます、了解しました。

0
Avatar
erika

joan様
おっしゃるとおり、チェックボックスが問題だと思います。
テーブルでのチェックボックスの非表示は私自身やったことがないのでお力になれないです。
すいません。

ただ、イベントを考えず非表示にするならCSSだけで、下記の方法があります。
1番目のテーブルの1列目を非表示にする


table.subtable-gaia:nth-of-type(1) th:nth-child(1),
table.subtable-gaia:nth-of-type(1) td:nth-child(1) {
display: none;
}

これらを応用すればできる可能性はあるかと思います。

今後ですが、質問はテーブルの項目に何を設定しているなど詳細にされた方がよいかと思います。
後出しで情報をだされると回答される方の時間を長く頂いてしまいますので。。

0
Avatar
J

erika様

そうですね、重ね重ねすみませんでした、ご回答ありがとうございます。

以後注意します。

本当にありがとうございました。

0
Avatar
erika

joan様

下記サイトを参考に作成してみたところ、javascriptだけでできそうですが、
行が増えると大変かもです。
一応乗せときますね!
サブテーブルの列の非表示

(function() {
"use strict";
kintone.events.on(
[
'app.record.detail.show',
'app.record.print.show',

], function(event) {

$('table:eq(0) thead tr th:eq(0)').hide();
var tbodyTimerId = setInterval(function () {
if ($('table:eq(0) tbody tr td:eq(0)').length > 0) {
clearInterval(tbodyTimerId);
$('table:eq(0) tbody tr td:eq(0)').hide();
$('table:eq(0) tbody tr td:eq(3)').hide();
}
}, 100);

return event;
});
})();


詳細画面

 

編集画面

erikaにより編集されました
1
Avatar
J

erika様

ありがとうございます!!この方式でやってみます!

0
サインインしてコメントを残してください。