# カスタマイズサブテーブルの固定項目

**URL:** <https://community.cybozu.dev/t/topic/165>\
**Category:** kintone 開発相談\
**Created:** [2022 年 10 月 13 日午前 2:17 UTC](https://community.cybozu.dev/t/topic/165 "2022-10-13T02:17:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1904](https://avatars.discourse-cdn.com/v4/letter/l/9e8a1a/32.png) [@Legacy\_Account1904](https://community.cybozu.dev/u/Legacy_Account1904)\
**Post date:** [2022 年 10 月 13 日午前 2:17 UTC](https://community.cybozu.dev/t/topic/165/1 "2022-10-13T02:17:41Z")

</div>

いつもお世話になっております。

以下の項目を固定したいですが、Copy JS pathで利用してコードを書きました。

うまく行けないですのでこちらの原因はわかる方が教授していただけますか。

よろしくお願いいたします。

jsPath:-\> document.querySelector(“#record-gaia \> div \> div.subtable-row-gaia.subtable-row-5979279 \> table \> tbody \> tr:nth-child(1) \> td:nth-child(1)”)

jsCode:-\>

kintone.events.on([‘app.record.detail.show’], function(event) {

…略…

var item = document.querySelector(“#record-gaia \> div \> div.subtable-row-gaia.subtable-row-5979279 \> table \> tbody \> tr:nth-child(1) \> td:nth-child(1)”);

&nbsp; &nbsp; item.style.position = ‘sticky’;

&nbsp; &nbsp; item.style.left = ‘0’;

&nbsp; &nbsp; item.style.zIndex = ‘1’;

return;

});

&nbsp;

&nbsp;

error:

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2534](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@Legacy\_Account2534](https://community.cybozu.dev/u/Legacy_Account2534)\
**Post date:** [2022 年 10 月 13 日午後 10:36 UTC](https://community.cybozu.dev/t/topic/165/2 "2022-10-13T22:36:13Z")

</div>

minhlongjapan さん

app.record.detail.show イベントが発生した段階でサブテーブル要素がまだ存在していないことが原因です。[MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver) などを利用してサブテーブルの描画を待てば取得できますが、実現したいことがセルの固定（スタイルの設定）のみでしたら、カスタム CSS に記述するのはいかがでしょうか？

参考ですが、下記のコードで検証すると挙動が確認できます。

```
kintone.events.on('app.record.detail.show', function(event) {
    // この段階では要素が存在しないため null が出力
  console.log(document.querySelector("#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)"))

    setTimeout(() => {
        // 検証用：一定時間待機すると要素が取得できる
      console.log(document.querySelector("#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)"))
    }, 2000)

    return event
});

```

以上になります。不明な点がありましたら、気兼ねなくご質問ください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1904](https://avatars.discourse-cdn.com/v4/letter/l/9e8a1a/32.png) [@Legacy\_Account1904](https://community.cybozu.dev/u/Legacy_Account1904)\
**Post date:** [2022 年 10 月 14 日午前 1:38 UTC](https://community.cybozu.dev/t/topic/165/3 "2022-10-14T01:38:36Z")

</div>

川村様

ご教授ありがとうございます。

setTimeoutを使ってうまく動きました。

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2534](https://avatars.discourse-cdn.com/v4/letter/l/e9a140/32.png) [@Legacy\_Account2534](https://community.cybozu.dev/u/Legacy_Account2534)\
**Post date:** [2022 年 10 月 14 日午前 4:35 UTC](https://community.cybozu.dev/t/topic/165/4 "2022-10-14T04:35:56Z")

</div>

minhlongjapan さん

念の為補足ですが、コードはあくまでも検証用ですので、setTimeout で実装しても2000ミリ秒後に要素があるとは保証はできません。ご留意ください。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 4 日午前 4:56 UTC](https://community.cybozu.dev/t/topic/165/5 "2024-06-04T04:56:19Z")

</div>

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