Disabledに設定したテーブルフィールドの背景色を灰色から白に変更したい。

下図の通り、別アプリから従業員情報を取り出したデータを、app.record.create.showイベントで、テーブルに書き込んでいます。併せて、転送していきたデータフィールドをdiabledに設定し、上書きを禁止しています。
この時、背景色が灰色になってしまい、見にくくなるため、白に変更したいと思っています。

現時点のコードは以下の通りです。

(function () {
    'use strict';

    kintone.events.on(['app.record.create.show'], function (event) {
        var record = event.record;

        // 従業員テーブルアプリから従業員データを取得して、従業員IDとシフトでソート
        kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
            app: 261, // 従業員テーブルアプリの実際のアプリIDに置き換えてください
            query: 'order by ID asc, SHIFT asc', // 従業員IDとシフトでソートするクエリを指定
            fields: ['ID', 'NAME', 'SHIFT'] // 取得するフィールドを指定
        }).then(function (resp) {
            // 従業員データを処理して表示
            var employeeData = resp.records;
            var employeeList = [];

            for (var i = 0; i < employeeData.length; i++) {
                employeeList.push({
                    'value': {
                        'NO': {
                            'value': i + 1,
                            'type': 'NUMBER',
                            'disabled': true // DISABLEDに設定
                        },
                        'ID': {
                            'value': employeeData[i].ID.value,
                            'type': 'NUMBER',
                            'disabled': true // DISABLEDに設定
                        },
                        'NAME': {
                            'value': employeeData[i].NAME.value,
                            'type': 'SINGLE_LINE_TEXT',
                            'disabled': true // DISABLEDに設定
                        },
                        'SHIFT': {
                            'value': employeeData[i].SHIFT.value,
                            'type': 'SINGLE_LINE_TEXT',
                            'disabled': true // DISABLEDに設定
                        },
                        'START': {
                            'value': "",
                            'type': 'TIME'
                        },
                        'END': {
                            'value': "",
                            'type': 'TIME'
                        },
                        'HOURS': {
                            'value': "",
                            'type': 'NUMBER'
                        }
                    }
                });
            }

            // 残業申請アプリのテーブルフィールドに従業員リストを設定
            record.employeeTable.value = employeeList;

            // レコードを更新
            kintone.app.record.set(event);
        });
    });
})();

テーブルフィールドの内、disabledにした、NO, ID, NAME, SHIFTの背景色を白に変更するコードにしたいのですが、具体的な修正案をご教示いただけないでしょうか?
(他のテーブルフィールドは変更なし)

kintone.app.record.set(event);

の後に

            const elements = document.querySelectorAll('.input-text-outer-cybozu [disabled].input-text-cybozu');

            // 各要素の背景色を白に設定
            elements.forEach(function(element) {
                element.style.backgroundColor = 'white';
            });

を入れると背景を白くできました。
image

以下のように考えて調査しました。

テーブルの要素を特定したい。Dev toolで要素を選択してみる。


IDやクラスだけで目的の要素だけをきれいに選択できなそうなので、
CSSで指定されている部分を上書きすることを考える。

要素を選択してstyleを変更できるか、コンソール画面で確認

// 要素を選択
const elements = document.querySelectorAll('.input-text-outer-cybozu [disabled].input-text-cybozu');

// 各要素の背景色を白に設定
elements.forEach(function(element) {
    element.style.backgroundColor = 'white';
});

問題なさそうであればJavaScriptに反映する

ただ、kintoneの全体的な文法である「灰色箇所は入力・編集できない」を壊すことになりますので採用すべきやり方とは思えませんでした。

aaa様
ご提示いただいた内容を適用の上、要件通りに動作することを確認できました。
ありがとうございました。

1 Like

今度は、編集画面でも、同様に、テーブル内のNO, ID, NAME, SHIFTフィールドをdisabledに設定後、さらに背景色を灰色から白に変更したいと思い、'app.record.edit.show’イベント用JSファイルに、同様なコード内容で試しましたが、背景が白色になりません。

(function () {
    'use strict';

    kintone.events.on(['app.record.edit.show'], function (event) {
        var record = event.record;

        // ID, NAME_THAI, NAME_ENG, SHIFT, TRANSPORT フィールドを disabled に設定
        record.employeeTable.value.forEach(function (row) {
            row.value.NO.disabled = true;
            row.value.ID.disabled = true;
            row.value.NAME.disabled = true;
            row.value.SHIFT.disabled = true;
        });
        
         // 各要素の背景色を白に設定
        const elements = document.querySelectorAll('.input-text-outer-cybozu [disabled].input-text-cybozu');
        elements.forEach(function(element) {
            element.style.backgroundColor = 'white';
        });

        return event;
    });
})();

追加画面と同様、編集画面でも、disabledにしたフィールドの背景色を白に変更したいのですが、修正内容をご教示いただけないでしょうか。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。