印刷画面でサブテーブルのヘッダー罫線の太さを変更したい

kintone カスタマイズ
1

初めて質問します。

プログラミング初心者です。

https://developer.cybozu.io/hc/ja/articles/212084643-%E5%8D%B0%E5%88%B7%E7%94%BB%E9%9D%A2%E3%82%92%E3%83%A1%E3%82%A4%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97-kintone-%E5%8D%98%E4%BD%93%E3%81%A7%E7%B6%BA%E9%BA%97%E3%81%AB%E5%8D%B0%E5%88%B7-

こちらのTipsを参考に印刷時の表示変更を行っています。

サブテーブルのヘッダーの罫線が太い為位置ズレを起こしているように見えるのを解消したく、線の太さを変えようとしたのですが、過去投稿から探してもサブテーブルを触るのは難しいのかと行き詰まりました。

罫線を触ることは難しいのでしょうか？

2

キーユ さん

以下のようなコードで罫線の太さを変更できます。

var element = kintone.app.record.getFieldElement('フィールド名')
var header = element.getElementsByTagName('th')
for (var i = 0; i < header.length; i++){
  header[i].style.cssText = 'border-width: 1px'
}
3

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

言葉足らずで申し訳ありません。

getFieldElementはテーブルのフィールドは取得できないようなので行き詰まっておりまして…。

今の私の知識ではそろそろ諦めたほうがいいのか、という気持ちになっています。

4

キーユ さん

kintone 標準機能の印刷画面から印刷を行っていますか？

であれば、先ほどのコードをもとに実装可能です。

(function() {
kintone.events.on('app.record.print.show', function(event) {
var element = kintone.app.record.getFieldElement('フィールド名') // テーブルのフィールドコード
var header = element.getElementsByTagName('th')
for (var i = 0; i < header.length; i++){
header[i].style.cssText = 'border-width: 1px'
}
});
})()
5

実際の画面です。

6

早速のご回答大変助かりました。ただ単に変数で同じ名前を使っていたことでエラーを起こしていただけでした。

初歩的なミスで申し訳ないです。無事解決しました！ありがとうございました。

 

ヘッダー罫線を触ったことでテーブル幅が固定でなくなったのですが、これはテーブルの項目フィールド毎に幅指定できますか？

これこそDOM操作になるのでしょうか・・・？

7

キーユ さん

解決したとのことで良かったです！

すでに スタイルあたっているようなので、以下のようにすれば大丈夫そうです。

(function() {
kintone.events.on('app.record.print.show', function(event) {
var element = kintone.app.record.getFieldElement('フィールド名') // テーブルのフィールドコード
var header = element.getElementsByTagName('th')
for (var i = 0; i < header.length; i++){
header[i].style.cssText += 'border-width: 1px'
}
});
})()

6行目を = から += に変更しています。

8

魔法か？！・・・失礼致しました。この演算子でどういう命令になっているのか…と。

やはりCSSもあわせて勉強していかないといけないですね。

挫折しかけていたので本当に助かりました。精進します。ありがとうございました！！