[Bootstrap-Table] JavaScriptでテーブル表示（その2）

Bootstrap Table で前回紹介したUIと異なるデータ追加/更新方法を紹介します。

Bootstrap Table
http://bootstrap-table.wenzhixin.net.cn/

JavaScriptライブラリ

Bootstrap Table: 1.12.1

入力値の更新

テキストボックスやプルダウンの値が変更したら
変更した内容を更新するという実装になっています。
HTMLのIDから、テーブルのindexを取得します。
その後、bootstrapTable('getData')でデータを取得します。
以上から、bootstrapTable('updateRow',{})でデータを更新します。

入力値の更新

}).on('change', '[id^=name_]', function () {
    var id = $(this).attr('id');
    var index = parseInt(id.replace('name_', ''));
    var dataList = userTable.bootstrapTable('getData');
    dataList[index].name = $(this).val();
    userTable.bootstrapTable('updateRow', { index: index, row: dataList[index] });
})

デモはこちら
ソースファイルはこちら

以上です。

関連記事

[Bootstrap-Table] JavaScriptでテーブル表示（その1）
[Bootstrap-Table] JavaScriptでテーブル表示（その2）
[Bootstrap-Table] JavaScriptでテーブル表示（その3）
[Bootstrap-Table] JavaScriptでテーブル表示（その4）
[Bootstrap-Table] JavaScriptでテーブル表示（その5）