Skip to content

Instantly share code, notes, and snippets.

@kshitij-gavhane

kshitij-gavhane/add-edit-delete-rows-tray-series.markdown

Created October 3, 2022 22:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kshitij-gavhane/7919b617cc0bd51a4c5921a79266d1ea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kshitij-gavhane/7919b617cc0bd51a4c5921a79266d1ea to your computer and use it in GitHub Desktop.
Download ZIP
Add-Edit-Delete Rows - Tray Series
Raw
add-edit-delete-rows-tray-series.markdown
Raw
index.html
<!--main content start-->
<!-- page start-->
<section class="panel">
<header class="panel-heading">
Editable Table
</header>
<div class="panel-body">
<div class="adv-table editable-table ">
<div class="clearfix">
<div class="btn-group">
<button id="editable-sample_new" class="btn green">
Add New
<i class="fa fa-plus"></i>
</button>
</div>
<div class="btn-group pull-right">
<button class="btn dropdown-toggle" data-toggle="dropdown">Tools <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Print</a></li>
<li><a href="#">Save as PDF</a></li>
<li><a href="#">Export to Excel</a></li>
</ul>
</div>
</div>
<div class="space15"></div>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" id="editable-sample">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
<th>OM ID</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Rose</td>
<td>Alfred </td>
<td>01/09/1978</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
<tr class="">
<td>Jondi Rose</td>
<td>Alfred Jondi Rose</td>
<td>1234</td>
<td class="center">super user</td>
<td><a class="edit" href="javascript:;">Edit</a></td>
<td><a class="delete" href="javascript:;">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- page end-->
Raw
script.js
jQuery(document).ready(function() {
EditableTable.init();
});
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/jquery.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/jquery-ui-1.9.2.custom.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/jquery.nicescroll.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/jquery.dataTables.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/DT_bootstrap.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/jquery-migrate-1.2.1.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/respond.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/editable-table.js"></script>
Raw
styles
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/bootstrap.min.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/DT_bootstrap.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184766/style.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment