# テーブルにボタンを設置したい

**URL:** <https://community.cybozu.dev/t/topic/8305>\
**Category:** kintone 開発相談\
**Created:** [2023 年 11 月 7 日午前 3:41 UTC](https://community.cybozu.dev/t/topic/8305 "2023-11-07T03:41:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ymyamayu](https://avatars.discourse-cdn.com/v4/letter/y/5daacb/32.png) [@ymyamayu](https://community.cybozu.dev/u/ymyamayu)\
**Post date:** [2023 年 11 月 7 日午前 3:41 UTC](https://community.cybozu.dev/t/topic/8305/1 "2023-11-07T03:41:47Z")

</div>

kintoneのテーブルにボタンを配置したいと考えております。  
ですが、ボタン配置に使用する「スペースフィールド」は  
テーブル上に設置することが不可能です。

画像のように、フィールド内に設置できるのが理想ですが  
一旦は、テーブルに設置することができれば、どのような形でも構いません。  
 ![スクリーンショット 2023-11-07 123857](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/71cadfb418ab91c0331f7767b273ee37d80b9f07.png)

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

---

<div class="post-metadata">

**Author:** ![pomo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/pomo/32/465_2.png) [@pomo](https://community.cybozu.dev/u/pomo)\
**Post date:** [2023 年 11 月 9 日午前 5:15 UTC](https://community.cybozu.dev/t/topic/8305/2 "2023-11-09T05:15:23Z")

</div>

私も編集画面でテーブルにカスタムボタンをclass捕まえて追加してます。ただ強引な方法なのでkintone更新で変わる場合があるかもしれません。

```javascript
(() => {
	kintone.events.on('app.record.edit.show', (event: any) => {
		// テーブルのclassNameを編集画面確認して設定。後方のclassNameは編集時はedit-subtable-gaiaですが、詳細画面だとshow-sabutable-gaiaなど異なります。
		const tableEl = document.querySelector(".subtable-gaia.subtable-●●●●.edit-subtable-gaia")
		const rows = tableEl?.querySelectorAll("tr")
		if (!rows) return

		for (let i = 0; i < rows?.length; i++) {
			// 1行目はタイトルなので飛ばす
			if (i === 0) continue
			const button = document.createElement("button")
			button.innerText = "test"
			button.className = `button-${i}`
			rows[i].appendChild(button)
		}
		return event
	})
})()

```

実際にはさらにテーブル行が増えた時にボタン増やしたり、ボタン押下時に行の値を取得したりして運用してあげないとですが、取っ掛かりとして参考になればです。

---

<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:** [2023 年 11 月 12 日午前 5:15 UTC](https://community.cybozu.dev/t/topic/8305/3 "2023-11-12T05:15:42Z")

</div>

クローズされました: 2023 年 11 月 12 日午前 5:15 UTC

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