タイトルについてお伺いします。
テーブル内のフィールドについて、区切りをはっきりと見やすくさせるために枠線の太さの変更をしたいと考えています。
枠線は下部ではなく、横線を太くする予定です。
また、テーブル内のすべてのフィールドではなく、一部のフィールドに適用します。
ご存知の方がいらっしゃいましたらご教示いただけますと幸いです。
よろしくお願いいたします。
こんにちは。
いろいろやり方はありますが、そのものズバリではないですが、下記が参考になるかと思います。
https://developer.cybozu.io/hc/ja/community/posts/115000371146
Kazuhiro Yoshidaさん
ご回答いただきありがとうございます！
参考にさせていただき、コピペで以下のようなコードを作成しました。
jQuery.noConflict();
(function($) {
“use strict”;
// サブテーブルの特定の行数の色を変更する
function changeColor(arg) {
var tr = $(kintone.app.record.getFieldElement(‘サイクル表’)).find(‘tr’);
var target = arg[0];
for (var i = 0; target.length > i; i++) {
var row = target[i]; // 色を変える行数を取得
$(tr[row]).css(‘background-color’, ‘red’);
}
}
kintone.events.on([‘app.record.detail.show’, ‘app.record.create.show’], function(event) {
var targetRow = []; // 色変え対象の行番号
var tableRecords = event.record[‘サイクル表’].value;
for (var j = 0; j < tableRecords.length; j++) {
var secondItemName = tableRecords[j].value[‘給与調整’].value;
if (secondItemName == ‘控除’) {
targetRow.push(j+1);
}
}
// サブテーブルのhtmlが表示されるまで0.5秒待つ
setTimeout(changeColor, 500, [targetRow]);
return event;
});
})(jQuery);
ここからさらに改良を加えたいです。
①行ではなく、列の色を変更したい。
②色の変更に条件は不要で、常に同じ列には同じ着色を行いたい。(できればフィールド間の線の太さを変更することで、区切りを表現したいです。)
③レコードの編集画面の時点で上記のの変更をしたい。
といった内容です。
プログラミング初心者の質問で、大変申し訳ありませんがアドバイスいただけると助かります。
よろしくお願いいたします。
こんにちは。
丸１と丸２について、ご提供されたコードを使ってやってみました。
jQuery.noConflict();
(function($) {
“use strict”;
// サブテーブルの特定の行数の色を変更する
function changeColorCol(rowCount, col) {
var td = $(kintone.app.record.getFieldElement(‘サイクル表’)).find(‘td’);
for (var i = 0; rowCount > i; i++) {
$(td[i\*3+col]).css(‘background-color’, ‘yellow’);
}
}
kintone.events.on([‘app.record.detail.show’, ‘app.record.create.show’], function(event) {
var targetRow = []; // 色変え対象の行番号
var tableRecords = event.record[‘サイクル表’].value;
let tableCount = tableRecords.length;
for (var j = 0; j < tableRecords.length; j++) {
var secondItemName = tableRecords[j].value[‘給与調整’].value;
if (secondItemName == ‘控除’) {
targetRow.push(j+1);
}
}
// サブテーブルのhtmlが表示されるまで0.5秒待つ
let arg = [tableCount, 1]; // サブテーブル行数, 色を変える列の番号
setTimeout(changeColorCol, 500, …arg);
return event;
});
})(jQuery);
もっと良いやり方は色々あるかと思います。
実行環境は macOS10.13.6, Google Chrome 69.0.3497.100 です。
Kazuhiro Yoshidaさん
ありがとうございます！
いただいたコードの下から5行目、
setTimeout(changeColorCol, 500, …arg);
のところですが、…arg に対して「構文エラ－です」とのデバッガー上でのエラーメッセージが表示されます。
理由はわかりますでしょうか。
yamaguchiさん、こんにちは。
…arg（スプレッド構文）はブラウザによってはサポートされていないので、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
setTimeout(changeColorCol, 500, tableCount, 1);
のようにタイマーの時間の後に、引数を並べて指定してみてください。
Kazuhiro Yoshidaさん、ありがとうございます！
参考にさせていただきます！