kintone 앱에 설치한 테이블이 있고, 그 테이블 내의 조건에 따라 배경색을 붙이는 샘플입니다.
kintone의 테이블을 JavaScript로 DOM 조작하는데 필요한 기본이 들어 있습니다.

소개 완성된 이미지

앱 설정 개요

테이블··· 필드 코드 : 일보_당일

테이블 내의 필드··· 필드 코드 : 시간대 구분

처리 개요

앱 상세 화면을 열 때 테이블 셀에 설정한 시간대 구분의 「오전, 오후, 1시간 전」에 따라 테이블 행의 배경색을 설정합니다.

처리 흐름

상세 화면 표시 이벤트를 취득합니다.

조작할 대상의 테이블 필드를 가져옵니다.

테이블 행의 시간대 세그먼트 필드의 내용을 가져옵니다.

시간대 구분 필드의 내용에 따라 테이블 행 (tr)에 클래스 속성을 설정합니다.

CSS 스타일에 맞게 테이블 행에 배경색이 설정됩니다.

소스 코드

더 좋은 방법, 심플한 방법은 있을까 생각하므로 꼭 의견을 주시면 도움이됩니다.
(※setInterval을 사용한 방식으로 변경해 보았습니다.)

JavaScript 파일

jQuery.noConflict();
(function($) {
    "use strict";
    var events = ["app.record.detail.show"];
    var fieldCodeSubTable = "日報_当日";
    kintone.events.on(events, function(event) {

        var record = event.record;
        var recordId = kintone.app.record.getId();
        var subTable = record[fieldCodeSubTable].value;
        console.log(subTable);
        console.log(subTable.length);
        if (subTable.length === 0) { return event } // subtable record nothing
        // テーブルフィールドを取得
        var el = kintone.app.record.getFieldElement(fieldCodeSubTable);

        // テーブルの行数を取得します
        function asyncProcess(val, len) {
            console.log(val);
            console.log(len);
            return new Promise((resolve, reject) => {
                var timer = setInterval(() => {
                    if (val.length - 1 === len) {
                        console.log(val.length);
                        clearInterval(timer);
                        resolve(val.length);
                    } else {
                        console.log(val.length);
                    }
                }, 100);
            });
        }

        // テーブルの行内のセルの内容に合わせて、tr要素にクラス属性をセットします
        asyncProcess(el.rows, subTable.length).then(
            response => {
                for (var i=1, len=response; i<len; i+=1) {
                    var timeTable = el.rows[i].cells[0].textContent;
                    switch (timeTable) {
                        case '午前' :
                            el.rows[i].classList.add("am");
                            break;
                        case '午後' :
                            el.rows[i].classList.add("pm");
                            break;
                        case '１時間前' :
                            el.rows[i].classList.add("last");
                            break;
                        default :
                            console.log(timeTable);
                    }

                }
                return event;
            },
            error => {
                console.log(error);
                return event;
            }
        );
    });
})(jQuery);

CSS 파일

.am {
    background-color:#7AE1FF;
}
.pm {
    background-color:#7BE5B8;
}
.last {
    background-color:#E5D351;
}

요약

kintone의 테이블을 조작할 때에 주의하고 싶은 점은, 테이블의 묘화 타이밍입니다.
화면의 끝에서 그려진 것처럼, 테이블 행 수를 얻고 루프에서 각 행의 DOM을 조작하는 경우 setTimeout을 사용하여 테이블 그리기를 기다려야합니다.
테이블의 렌더링 대기를 setTimeout에서 setInterval로 변경했습니다. rex0220, 조언 해 주셔서 감사합니다.

덧붙여 비슷한 내용의 투고가 cybozu developer network 에 있었으므로, 링크해 둡니다.

레코드에 등록 된 테이블의 문자열을보고 스타일 시트의 TR 색상을 정의하고 싶습니다.