Edit With Click & Press Enter To Save
Click on row to perform edit action then Enter for save| # | First | Last | Nickname |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thorntonkk | @mdo |
| 3 | Larry | the Bird | @mdo |
HTML Usage
<!-- Edit With Click card start -->
<div class="card">
<div class="card-header">
<h5>Edit With Click & Press Enter To Save</h5>
<span>Click on row to perform edit action then Enter for save</span>
</div>
<div class="card-block">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="example-1">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Mark</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Mark">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">Otto</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="Otto">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm d-none" name="Nickname" disabled="">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Jacob</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Jacob"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">Thorntonkk</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="Thornton"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm d-none" name="Nickname" disabled="">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Larry</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Larry"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">the Bird</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="the Bird"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm d-none" name="Nickname" disabled="">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary waves-effect waves-light add" onclick="add_row();">Add Row
</button>
</div>
</div>
<!-- Edit With Click card end -->
Javascript Usage
<!-- Editable-Table JS -->
<script src="plugins/edit-table/jquery.tabledit.js"></script>
<script src="plugins/edit-table/editable.js"></script>
<script>
'use strict';
$(document).ready(function () {
$('#example-1').Tabledit({
editButton: false,
deleteButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'First Name'],
[2, 'Last Name']
]
}
});
});
function add_row() {
var table = document.getElementById("example-1");
var t1 = (table.rows.length);
var row = table.insertRow(t1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.className = 'abc';
cell2.className = 'abc';
$('<span class="tabledit-span" >Click Me To Edit</span><input class="tabledit-input form-control input-sm" type="text" name="First" value="undefined" disabled="">').appendTo(cell1);
$('<span class="tabledit-span" >Click Me To Edit</span><input class="tabledit-input form-control input-sm" type="text" name="Last" value="undefined" disabled="">').appendTo(cell2);
$('<span class="tabledit-span" >@mdo</span><select class="tabledit-input form-control input-sm" name="Nickname" disabled="" ><option value="1">@mdo</option><option value="2">@fat</option><option value="3">@twitter</option></select>').appendTo(cell3);
};
</script>
Edit With Button
Click on buttons to perform actions| # | First | Last | Nickname |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thorntonkk | @mdo |
| 3 | Larry | the Bird | @mdo |
HTML Usage
<!-- Edit With Button card start -->
<div class="card">
<div class="card-header">
<h5>Edit With Button</h5>
<span>Click on buttons to perform actions</span>
</div>
<div class="card-block">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="example-2">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Mark</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Mark">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">Otto</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="Otto">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm" name="Nickname" disabled=""
style="display:none;">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Jacob</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Jacob"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">Thorntonkk</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="Thornton"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm" name="Nickname" disabled=""
style="display:none;">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="tabledit-view-mode"><span class="tabledit-span">Larry</span>
<input class="tabledit-input form-control input-sm" type="text" name="First" value="Larry"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">the Bird</span>
<input class="tabledit-input form-control input-sm" type="text" name="Last" value="the Bird"
disabled="">
</td>
<td class="tabledit-view-mode"><span class="tabledit-span">@mdo</span>
<select class="tabledit-input form-control input-sm" name="Nickname" disabled=""
style="display:none;">
<option value="1">@mdo</option>
<option value="2">@fat</option>
<option value="3">@twitter</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit With Button card end -->
Javascript Usage
<script>
'use strict';
$(document).ready(function () {
$('#example-1').Tabledit({
editButton: false,
deleteButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'First Name'],
[2, 'Last Name']
]
}
});
});
function add_row() {
var table = document.getElementById("example-1");
var t1 = (table.rows.length);
var row = table.insertRow(t1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.className = 'abc';
cell2.className = 'abc';
$('<span class="tabledit-span" >Click Me To Edit</span><input class="tabledit-input form-control input-sm" type="text" name="First" value="undefined" disabled="">').appendTo(cell1);
$('<span class="tabledit-span" >Click Me To Edit</span><input class="tabledit-input form-control input-sm" type="text" name="Last" value="undefined" disabled="">').appendTo(cell2);
$('<span class="tabledit-span" >@mdo</span><select class="tabledit-input form-control input-sm" name="Nickname" disabled="" ><option value="1">@mdo</option><option value="2">@fat</option><option value="3">@twitter</option></select>').appendTo(cell3);
};
</script>
Andrew Smith