Bootstrap-based jQuery editable table plugin Bootstable

Add-ons

2026-07-26 04:34 3 次浏览 • 0 次下载 3.3KB

Bootstrap-based jQuery editable table plugin Bootstable

Plugin description: Bootstable is a jQuery table editing plugin based on Bootstrap. This plugin automatically adds edit and delete buttons to tables, allowing them to be edited dynamically.

Last updated: 2019-11-28 10:25:46

Bootstable

A JavaScript library that makes HTML tables editable using Bootstrap

Bootstable

"Bootstable" is a JavaScript library (plugin) that allows static HTML tables to be converted into editable tables. Editable tables include multiple buttons for performing editing operations.

Editing options include:

Specified table cells can be edited.
Table rows can be deleted.
New table rows can be added.

Usage

Include the jquery and bootstable.js files in the page.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstable.js"></script>

HTML Structure

Use the table template provided by Bootstrap as the HTML structure for the table.

<div class="table-responsive">
  <table class="table table-bordered table-striped" id="mytable">
      <thead>
        <tr>
          <td>Name</td>
          <td>Age</td>
          <td>email</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Zhang San</td>
          <td>25</td>
          <td>zs@163.com</td>
        </tr>
        <tr>
          <td>Li Si</td>
          <td>23</td>
          <td>lisi@qq.com</td>
        </tr>
        <tr>
          <td>Wang Wu</td>
          <td>24</td>
          <td>ww@126.com</td>
        </tr>
      </tbody>
  </table>
</div>

If you want to add table rows, you also need to add a button.

<button class="btn btn-info" id="add"><i class="fa fa-plus"></i> Add a new table row</button>

Initialize the Plugin

After the page DOM elements have finished loading, initialize this jQuery table editing plugin using the SetEditable() method.

1	`$('#mytable').SetEditable();`

Note: You must add an ID to the table. Each call to SetEditable() can initialize only one table. If you have multiple tables, call SetEditable() separately for each one.

Configuration Parameters

The available configuration parameters for this jQuery table editing plugin are:

$('#mytable').SetEditable({
    columnsEd: null,         //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"
    $addButton: null,        //Jquery object of "Add" button
    onEdit: function() {},   //Called after edition
    onBeforeDelete: function() {}, //Called before deletion
    onDelete: function() {}, //Called after deletion
    onAdd: function() {}     //Called when added a new row
});

columnsEd: The indexes of the table columns to be edited.
$addButton: The jQuery object representing the button used to add table rows.
onEdit: Callback function triggered when editing a table.
onBeforeDelete: Callback function triggered before deleting a table row.
onDelete: Callback function triggered after deleting a table row.
onAdd: Callback function triggered before adding a new table row.

For example:

$('#mytable').SetEditable({
    columnsEd: "0,1",  // Edit the first and second columns     
    $addButton: $('#but_add'),
    onEdit: function() {
        //console.log("Edit table");
     }
});