Make HTML Table Editable - jQuery Table.js

Table.js is a dead simple jQuery plugin that makes any HTML table editable just like the spreadsheet and MS Excel. The plugin will transform the table cells into input fields or select elements when clicked.

How to use it:

1. Include the table.js script after loading jQuery JavaScript library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="table.js"></script>

2. Call the function on your html table and specify the table cells should be editable.

<table id="test-table">
  <tbody>
    <tr>
      <th>Username</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
    <tr>
      <td>jQuery</td>
      <td>96</td>
      <td>83</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Script</td>
      <td>86</td>
      <td>76</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

$('#test-table').table({
  cellType: 'td',
  select:{
    3:['A','B','C','D']
  }
})

3. Apply additional CSS styles to the table cells when editing.

$('#test-table').table({
  inputCss: {
    padding: '0.75em'
    // more styles here
  }
})

---

This awesome jQuery plugin is developed by imgss. For more Advanced Usages, please check the demo page or visit the official website.