xxxxxxxxxx1
<!-- Editable tables -->2
<div class="card">3
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>4
<div class="card-body">5
<div id="table" class="table-editable">6
<span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i7
class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>8
<table class="table table-bordered table-responsive-md table-striped text-center">9
<thead>10
<tr>11
<th class="text-center">Person Name</th>12
<th class="text-center">Age</th>13
<th class="text-center">Company Name</th>14
<th class="text-center">Country</th>15
<th class="text-center">City</th>16
<th class="text-center">Sort</th>17
<th class="text-center">Remove</th>18
</tr>19
</thead>20
<tbody>21
<tr>22
<td class="pt-3-half" contenteditable="true">Aurelia Vega</td>23
<td class="pt-3-half" contenteditable="true">30</td>24
<td class="pt-3-half" contenteditable="true">Deepends</td>25
<td class="pt-3-half" contenteditable="true">Spain</td>26
<td class="pt-3-half" contenteditable="true">Madrid</td>27
<td class="pt-3-half">28
<span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up"29
aria-hidden="true"></i></a></span>30
<span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down"31
aria-hidden="true"></i></a></span>32
</td>33
<td>34
<span class="table-remove"><button type="button"35
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>36
</td>37
</tr>38
<!-- This is our clonable table line -->39
<tr>40
<td class="pt-3-half" contenteditable="true">Guerra Cortez</td>41
<td class="pt-3-half" contenteditable="true">45</td>42
<td class="pt-3-half" contenteditable="true">Insectus</td>43
<td class="pt-3-half" contenteditable="true">USA</td>44
<td class="pt-3-half" contenteditable="true">San Francisco</td>45
<td class="pt-3-half">46
<span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up"47
aria-hidden="true"></i></a></span>48
<span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down"49
aria-hidden="true"></i></a></span>50
</td>51
<td>52
<span class="table-remove"><button type="button"53
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>54
</td>55
</tr>56
<!-- This is our clonable table line -->57
<tr>58
<td class="pt-3-half" contenteditable="true">Guadalupe House</td>59
<td class="pt-3-half" contenteditable="true">26</td>60
<td class="pt-3-half" contenteditable="true">Isotronic</td>61
<td class="pt-3-half" contenteditable="true">Germany</td>62
<td class="pt-3-half" contenteditable="true">Frankfurt am Main</td>63
<td class="pt-3-half">64
<span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up"65
aria-hidden="true"></i></a></span>66
<span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down"67
aria-hidden="true"></i></a></span>68
</td>69
<td>70
<span class="table-remove"><button type="button"71
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>72
</td>73
</tr>74
<!-- This is our clonable table line -->75
<tr class="hide">76
<td class="pt-3-half" contenteditable="true">Elisa Gallagher</td>77
<td class="pt-3-half" contenteditable="true">31</td>78
<td class="pt-3-half" contenteditable="true">Portica</td>79
<td class="pt-3-half" contenteditable="true">United Kingdom</td>80
<td class="pt-3-half" contenteditable="true">London</td>81
<td class="pt-3-half">82
<span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up"83
aria-hidden="true"></i></a></span>84
<span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down"85
aria-hidden="true"></i></a></span>86
</td>87
<td>88
<span class="table-remove"><button type="button"89
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>90
</td>91
</tr>92
</tbody>93
</table>94
</div>95
</div>96
</div>97
<!-- Editable table -->xxxxxxxxxx1
.pt-3-half {2
padding-top: 1.4rem;3
}xxxxxxxxxx1
const $tableID = $('#table');2
const $BTN = $('#export-btn');3
const $EXPORT = $('#export');4
5
const newTr = `6
<tr class="hide">7
<td class="pt-3-half" contenteditable="true">Example</td>8
<td class="pt-3-half" contenteditable="true">Example</td>9
<td class="pt-3-half" contenteditable="true">Example</td>10
<td class="pt-3-half" contenteditable="true">Example</td>11
<td class="pt-3-half" contenteditable="true">Example</td>12
<td class="pt-3-half">13
<span class="table-up"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-up" aria-hidden="true"></i></a></span>14
<span class="table-down"><a href="#!" class="indigo-text"><i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i></a></span>15
</td>16
<td>17
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 waves-effect waves-light">Remove</button></span>18
</td>19
</tr>`;20
21
$('.table-add').on('click', 'i', () => {22
23
const $clone = $tableID.find('tbody tr').last().clone(true).removeClass('hide table-line');24
25
if ($tableID.find('tbody tr').length === 0) {26
27
$('tbody').append(newTr);28
}29
30
$tableID.find('table').append($clone);31
});32
33
$tableID.on('click', '.table-remove', function () {34
35
$(this).parents('tr').detach();36
});37
38
$tableID.on('click', '.table-up', function () {39
40
const $row = $(this).parents('tr');41
42
if ($row.index() === 0) {43
return;44
}45
46
$row.prev().before($row.get(0));47
});48
49
$tableID.on('click', '.table-down', function () {50
51
const $row = $(this).parents('tr');52
$row.next().after($row.get(0));53
});54
55
$('#td').live('focus', function() { $(this).select(); });56
57
// A few jQuery helpers for exporting only58
jQuery.fn.pop = [].pop;59
jQuery.fn.shift = [].shift;60
61
$BTN.on('click', () => {62
63
const $rows = $tableID.find('tr:not(:hidden)');64
const headers = [];65
const data = [];66
67
// Get the headers (add special header logic here)68
$($rows.shift()).find('th:not(:empty)').each(function () {69
70
headers.push($(this).text().toLowerCase());71
});72
73
// Turn all existing rows into a loopable array74
$rows.each(function () {75
const $td = $(this).find('td');76
const h = {};77
78
// Use the headers from earlier to name our hash keys79
headers.forEach((header, i) => {80
81
h[header] = $td.eq(i).text();82
});83
84
data.push(h);85
});86
87
// Output the result88
$EXPORT.text(JSON.stringify(data));89
}); Console errors: 0