Jquery Tabledit / Example #7

Inline Editor Table

by megaadriano

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="example7">
    <thead>
      <tr>
        <th>#</th>
        <th>Make</th>
        <th>Model</th>
        <th>Year</th>
        <th>Platform</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>BMW</td>
        <td>5-Series</td>
        <td>2018</td>
        <td>G30</td>
      </tr>
      <tr>
        <td>2</td>
        <td>BMW</td>
        <td>6-Series, M6</td>
        <td>2009</td>
        <td>F12/F13</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Ford</td>
        <td>Mustang</td>
        <td>2015</td>
        <td>(6th gen)</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Ford</td>
        <td>Explorer</td>
        <td>2017</td>
        <td>(5th gen)</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

$(document).ready(function() {
    // Example #7
    $('#example7').Tabledit({
      url: '/echo/json/',
      eventType: 'dblclick',
    editButton: false,
      columns: {
        identifier: [0, 'id'],
        editable: [
          [1, 'make', 'input'],
          [2, 'year', 'textarea', '{"rows": "2", "cols": "4", "maxlength": "50", "wrap": "hard"}'],
          [3, 'model', 'number'],
          [4, 'platform', 'select', '{"0": "G30", "1": "F12/F13", "2": "(5th gen)", "3": "((6th gen))"}']
        ]
      }
    });
  });