新規投稿
フォローする

javascriptで作成したテーブル内のボタンにonclickを追加したい

背景・実現したいこと

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);
            }

        }
    });
};
0

2件のコメント

Avatar
江田篤史

新井さん

お世話になっております。

> ソースコードの通り試してもonclickが追加されません
onclick属性が追加されないということでしょうか?
ご提示いただいたコードでは、onclickプロパティを指定しているので、HTML要素の属性には変化は現れないかと思います。
https://qiita.com/quryu/items/cf021783c2ee78ae3c5c

addBlot()という関数は、どこか別の場所で定義されていますか?
その場合は、btnChoice.onclickに代入する際、functionや丸括弧や波括弧は不要かと思います。

 btnChoice.onclick  = addBlot;

現状ですと、statements(処理)が空のaddBlotという関数を新たに定義して、btnChoice.onclickに代入している状態かと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

0
Avatar
新井

江田様

お世話になっております。

 

ご教示いただきありがとうございました。

教えていただいたように「btnChoice.onclick  = addBlot;」としてみてもやはり追加されませんでした。

 

モーダルウィンドウはこの記事を参考にpopModalを使って作成しているのですが、

これが何か関係しているかもしれないと思い、ボタンにonclickを追加することは諦めてラジオボタンに変え、

ラジオボタンで選択させた後にpopModalが作成する[ OK ]ボタンを押したタイミングでaddBlotの関数が実行されるようにしたところ、ひとまず思った方法でaddBlotの関数が実行されるようになりました。

 

addBlotはここに記載できていなかったのですが別に定義しておりました。紛らわしくしてしまい申し訳ございません。

1
サインインしてコメントを残してください。