背景・実現したいこと
kintoneの詳細表示画面にテキストボックスを作成し、テキストボックスの隣にあるボタンを押すとモーダルウィンドウが開くようにしています。
このモーダルウィンドウの中身はjavascriptで動的に作成したテーブルを表示しています。ウィンドウ表示の際に表示されているアプリとは別の「社員名簿」アプリからレコード番号、氏名を取り出し、最後にボタンを追加したデータをテーブルとして表示するまではできました。
このテーブルの最後の列にあるボタンにonclickを設定して関数が実行できるようにしたいのですが、ソースコードの通り試してもonclickが追加されません。
動的に作成したボタンをクリックしたら関数が実行されるようにするにはどうすれば良いでしょうか。
エラー情報
テーブルとボタンの作成はできますが、onclickの追加が反映されません。
利用したソースコード
function addTable() {
let Name = document.getElementById(‘staffName’).value;
let params = {
‘app’: ‘1’,
‘query’: ‘氏名 like "’ + Name + ‘" order by 作成日時 desc’
};
kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, params).then(function(res){
let arrTd = [‘$id’,‘氏名’,‘選択’];
let tableEle = document.getElementById(‘employee_table’);
let tblHead = document.createElement(“thead”);
let tblBody = document.createElement(“tbody”);
let tr = document.createElement(‘tr’);
tableEle.appendChild(tblHead);
tblHead.appendChild(tr);
for (let item in arrTd) {
let th = document.createElement(‘th’);
th.innerHTML = arrTd[item];
tr.appendChild(th);
}
// 社員名簿から取得したレコード数だけテーブルに行を追加
tableEle.appendChild(tblBody);
let td = {};
for (let i = 0; i < Object.keys(res.records).length; i++) {
let tr = document.createElement(‘tr’);
// セルを追加
for (let j = 0; j < arrTd.length; j++) {
let colButton = arrTd.length -1;
td[j] = document.createElement(‘td’);
// 選択ボタン以外の列は社員名簿の値を利用
if (j !== colButton) {
let chk = !Object.keys(res.records[i][arrTd[j]]).length;
if (!Object.keys(res.records[i][arrTd[j]]).length) {
td[j].innerHTML = ‘’;
} else {
td[j].innerHTML = res.records[i][arrTd[j]].value;
}
} else {
// 選択ボタンの生成
let btnChoice = document.createElement(‘button’);
btnChoice.innerHTML = ‘選択’;
btnChoice.onclick = function addBlot() {
}
td[j].appendChild(btnChoice);
}
tr.appendChild(td[j]);
tblBody.appendChild(tr);
}
}
});
};