Jquery Tabledit / Example #4

Inline Editor Table

by gayanov2017

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/BluesatKV/jquery-tabledit/c1759e6c/jquery.tabledit.js"></script>
<div class="table-responsive">
  <table class="table table-striped table-bordered" id="example4">
    <thead>
      <tr>
        <th>#</th>
        <th>Nickname</th>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>markcell</td>
        <td>Celso</td>
        <td>Marques</td>
      </tr>
      <tr>
        <td>2</td>
        <td>dotz</td>
        <td>Márcio</td>
        <td>Quental</td>
      </tr>
      <tr>
        <td>3</td>
        <td>zikospeed</td>
        <td>António</td>
        <td>Figueiredo</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

$(document).ready(function() {
    // Example #4
    $('#example4').Tabledit({
      url: '/echo/json/',
      rowIdentifier: 'data-id',
      editButton: false,
      restoreButton: false,
      columns: {
        identifier: [0, 'id'],
        editable: [[1, 'nickname'], [2, 'firstname'], [3, 'lastname']]
      }
    });
  });