Can someone help please? I have an editable table with column sum, using HTML and JS.
I tried to add a row, it's working but when I enter value on the new row, my total column is not changing dynamically, it's changing only after I use another row.
I just want to find how when I'm adding a new row and edit value content, it's changing the total of my column dynamically, not only when I used another row.
(Sorry I'm still training, if it's not perfect, I'm here to learn from my mistakes.)
Thanks,
Here is my code :
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Editable table -->
<div class="card shadow-none border-top-0" style="border-color: #a8b698; background-color: #fff;">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4" style="background-color: #fff; border-color: #fff;">Table de données</h3>
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
<a href="#!" class="text-success material-tooltip-main" data-toggle="tooltip" data-placement="right" title="Ajouter une ligne"><i class="fas fa-plus fa-2x" aria-hidden="true"></i></a>
</span>
<table id="example" class="table table-responsive-md text-center">
<thead>
<!-- TITLES OF COLUMNS -->
<tr class="mescouilles">
<th class="text-center" contenteditable="false">Grade</th>
<th class="text-center" contenteditable="true">EFF THEO</th>
<th class="text-center" contenteditable="true">ABS</th>
<th class="text-center" contenteditable="true">PRESENT</th>
<th class="text-center" contenteditable="true">INDISPONIBLE</th>
<th class="text-center" contenteditable="true">SLR</th>
<th class="text-center" contenteditable="false">SUPPRIMER</th>
</tr>
</thead>
<tbody>
<!-- OFF ROW -->
<tr class="cucul">
<td class="pt-3-half colonne" contenteditable="true">Off</td>
<td class="pt-3-half" contenteditable="true">
<input id="value2" type="number" name="value2" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value9" type="number" name="value9" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center colonneDeux" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value16" type="number" name="value16" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value23" type="number" name="value23" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value30" type="number" name="value30" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span>
</td>
</tr>
<!-- S/OFF ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">S/OFF</td>
<td class="pt-3-half" contenteditable="true">
<input id="value3" type="number" name="value3" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value10" type="number" name="value10" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center colonneDeux" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value17" type="number" name="value17" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value24" type="number" name="value24" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value31" type="number" name="value31" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span>
</td>
</tr>
<!-- CCH ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="flase">CCH</td>
<td class="pt-3-half" contenteditable="true">
<input id="value4" type="number" name="value4" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value11" type="number" name="value11" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value18" type="number" name="value18" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value25" type="number" name="value25" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value32" type="number" name="value32" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span>
</td>
</tr>
<!-- CPL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">CPL</td>
<td class="pt-3-half" contenteditable="true">
<input id="value5" type="number" name="value5" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value12" type="number" name="value12" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value19" type="number" name="value19" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value26" type="number" name="value26" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value33" type="number" name="value33" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span>
</td>
</tr>
<!-- ICL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">ICL</td>
<td class="pt-3-half" contenteditable="true">
<input id="value6" type="number" name="value6" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value13" type="number" name="value13" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value20" type="number" name="value20" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value27" type="number" name="value27" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value34" type="number" name="value34" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span>
</td>
</tr>
<!-- LEG ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">LEG</td>
<td class="pt-3-half" contenteditable="true">
<input id="value7" type="number" name="value7" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value14" type="number" name="value14" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value21" type="number" name="value21" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value28" type="number" name="value28" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value35" type="number" name="value35" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;"/>
</td>
<td>
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 shadow-none">SUPPRIMER</button></span>
</td>
</tr>
</tbody>
<tfoot>
<!-- TOTAL OF COLUMNS -->
<tr style="background-color: #c5d3b6; border-width: 3px;">
<td class="pt-3-half colonne" contenteditable="false" >TOTAL</td>
<td class="pt-3-half" contenteditable="false">
<input disabled="disabled" id="sum" type="number" name="sum" value="" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #c5d3b6;"/>
</td>
<td class="pt-3-half" contenteditable="false">
<input disabled="disabled" id="sum2" type="number" name="sum2" value="" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #c5d3b6;"/>
</td>
<td class="pt-3-half" contenteditable="false">
<input disabled="disabled" id="sum3" type="number" name="sum3" value="" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #c5d3b6;"/>
</td>
<td class="pt-3-half" contenteditable="false">
<input disabled="disabled" id="sum4" type="number" name="sum4" value="" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #c5d3b6;"/>
</td>
<td contenteditable="false">
<input disabled="disabled" id="sum5" type="number" name="sum5" value="" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #c5d3b6;"/>
</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- Editable table -->
</body>
// Add new and Del a row
const $tableID = $('#table');
const $BTN = $('#export-btn');
const $EXPORT = $('#export');
const newTr = `
<tbody>
<tr class="border-bottom-1">
<td class="pt-3-half colonne" contenteditable="true" placeholder="Nouvelle ligne"><i class="fas fa-plus text-success" aria-hidden="true"></i></td>
<td class="pt-3-half" contenteditable="true"><input id="value1" type="number" name="value1" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input id="value8" type="number" name="value8" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input id="value15" type="number" name="value15" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input id="value22" type="number" name="value22" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input id="value29" type="number" name="value29" value="0" placeholder="0" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td><span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span></td>
</tr>
</tbody>`;
// Add/clone, new column (on click) without showing my first clonable row.
$('.table-add').on('click', 'i', () => {
const $clone = newTr;
if ($tableID.find('tbody tr').length === 0) {
$('tbody').append(newTr);
}
$tableID.find('table').prepend($clone);
});
$tableID.on('click', '.table-remove', function () {
$(this).parents('tr').detach();
});
$tableID.on('click', '.table-up', function () {
const $row = $(this).parents('tr');
if ($row.index() === 0) {
return;
}
$row.prev().before($row.get(0));
});
$tableID.on('click', '.table-down', function () {
const $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.on('click', () => {
const $rows = $tableID.find('tr:not(:hidden)');
const headers = [];
const data = [];
// Get the headers (add special header logic here)
$($rows.shift()).find('th:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
// Turn all existing rows into a loopable array
$rows.each(function () {
const $td = $(this).find('td');
const h = {};
// Use the headers from earlier to name our hash keys
headers.forEach((header, i) => {
h[header] = $td.eq(i).text();
});
data.push(h);
});
// Output the result
$EXPORT.text(JSON.stringify(data));
});
// Sum of each column
$(document).ready(function (e) {
$("#value1, #value2, #value3, #value4, #value5, #value6, #value7").change(function () {
var total = 0;
$("#value1, #value2, #value3, #value4, #value5, #value6, #value7").each(function () {
total = total + parseInt($(this).val());
});
$("#sum").val(total);
});
$("#value8, #value9, #value10, #value11, #value12, #value13, #value14").change(function () {
var total = 0;
$("#value8, #value9, #value10, #value11, #value12, #value13, #value14").each(function () {
total = total + parseInt($(this).val());
});
$("#sum2").val(total);
});
$("#value15, #value16, #value17, #value18, #value19, #value20, #value21").change(function () {
var total = 0;
$("#value15, #value16, #value17, #value18, #value19, #value20, #value21").each(function () {
total = total + parseInt($(this).val());
});
$("#sum3").val(total);
});
$("#value22, #value23, #value24, #value25, #value26, #value27, #value28").change(function () {
var total = 0;
$("#value22, #value23, #value24, #value25, #value26, #value27, #value28").each(function () {
total = total + parseInt($(this).val());
});
$("#sum4").val(total);
});
$("#value29, #value30, #value31, #value32, #value33, #value34, #value35").change(function () {
var total = 0;
$("#value29, #value30, #value31, #value32, #value33, #value34, #value35").each(function () {
total = total + parseInt($(this).val());
});
$("#sum5").val(total);
});
});
There is no point relying on ids when you are inserting an unlimited amount of elements.
In solution below I added data-col attribute on every input in the tbody so I could easily find a column it belongs to. After that I'm looping over every input, in the column that triggered the event, to calculate the total. In the end I'm updating the value of input in tfoot in the same column.
const $tableID = $("#table");
const newTr = `
<tbody>
<tr class="border-bottom-1">
<td class="pt-3-half colonne" contenteditable="true" placeholder="Nouvelle ligne"><i class="fas fa-plus text-success" aria-hidden="true"></i></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value1" value="0" placeholder="0" data-col="1" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value8" value="0" placeholder="0" data-col="2" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value15" value="0" placeholder="0" data-col="3" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value22" value="0" placeholder="0" data-col="4" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td class="pt-3-half" contenteditable="true"><input type="number" name="value29" value="0" placeholder="0" data-col="5" class="form-control form-control-sm border border-0 text-center" style="background-color: #fff;"/></td>
<td><span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">SUPPRIMER</button></span></td>
</tr>
</tbody>`;
// Add/clone, new column (on click) without showing my first clonable row.
$(".table-add").on("click", "i", () => {
const $clone = newTr;
if ($tableID.find("tbody tr").length === 0) {
$("tbody").append(newTr);
}
$tableID.find("table").prepend($clone);
});
$tableID.on("click", ".table-remove", function() {
$(this).parents("tr").detach();
});
// Sum of the column where the event was triggerred
$tableID.on("input", (event) => {
// Getting index of the column
const colNum = +event.target.dataset.col;
let total = 0;
// Looping over every row
$("tbody tr").each((i, tr) => {
total += +$(tr)
.find("input")
// Getting only the input in the same column as the triggered one
.eq(colNum - 1)
.val();
});
$("tfoot input")
.eq(colNum - 1)
.val(total);
});<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Editable table -->
<div class="card shadow-none border-top-0" style="border-color: #a8b698; background-color: #fff;">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4" style="background-color: #fff; border-color: #fff;">
Table de données
</h3>
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
<a
href="#!"
class="text-success material-tooltip-main"
data-toggle="tooltip"
data-placement="right"
title="Ajouter une ligne"
><i class="fas fa-plus fa-2x" aria-hidden="true"></i
></a>
</span>
<table id="example" class="table table-responsive-md text-center">
<thead>
<!-- TITLES OF COLUMNS -->
<tr class="mescouilles">
<th class="text-center" contenteditable="false">Grade</th>
<th class="text-center" contenteditable="true">EFF THEO</th>
<th class="text-center" contenteditable="true">ABS</th>
<th class="text-center" contenteditable="true">PRESENT</th>
<th class="text-center" contenteditable="true">INDISPONIBLE</th>
<th class="text-center" contenteditable="true">SLR</th>
<th class="text-center" contenteditable="false">SUPPRIMER</th>
</tr>
</thead>
<tbody>
<!-- OFF ROW -->
<tr class="cucul">
<td class="pt-3-half colonne" contenteditable="true">Off</td>
<td class="pt-3-half" contenteditable="true">
<input id="value2" type="number" name="value2" value="0" placeholder="0" data-col="1" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value9" type="number" name="value9" value="0" placeholder="0" data-col="2" class="form-control form-control-sm border border-0 text-center colonneDeux" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value16" type="number" name="value16" value="0" placeholder="0" data-col="3" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value23" type="number" name="value23" value="0" placeholder="0" data-col="4" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td class="pt-3-half" contenteditable="true">
<input id="value30" type="number" name="value30" value="0" placeholder="0" data-col="5" class="form-control form-control-sm border border-0 text-center" style="background-color: #b0bda2;" />
</td>
<td>
<span class="table-remove"><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- S/OFF ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">S/OFF</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value3"
type="number"
name="value3"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value10"
type="number"
name="value10"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center colonneDeux"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value17"
type="number"
name="value17"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value24"
type="number"
name="value24"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value31"
type="number"
name="value31"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- CCH ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="flase">CCH</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value4"
type="number"
name="value4"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value11"
type="number"
name="value11"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value18"
type="number"
name="value18"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value25"
type="number"
name="value25"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value32"
type="number"
name="value32"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- CPL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">CPL</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value5"
type="number"
name="value5"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value12"
type="number"
name="value12"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value19"
type="number"
name="value19"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value26"
type="number"
name="value26"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value33"
type="number"
name="value33"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- ICL ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">ICL</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value6"
type="number"
name="value6"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value13"
type="number"
name="value13"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value20"
type="number"
name="value20"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value27"
type="number"
name="value27"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value34"
type="number"
name="value34"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0"
>
SUPPRIMER
</button></span
>
</td>
</tr>
<!-- LEG ROW -->
<tr>
<td class="pt-3-half colonne" contenteditable="false">LEG</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value7"
type="number"
name="value7"
value="0"
placeholder="0"
data-col="1"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value14"
type="number"
name="value14"
value="0"
placeholder="0"
data-col="2"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value21"
type="number"
name="value21"
value="0"
placeholder="0"
data-col="3"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value28"
type="number"
name="value28"
value="0"
placeholder="0"
data-col="4"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td class="pt-3-half" contenteditable="true">
<input
id="value35"
type="number"
name="value35"
value="0"
placeholder="0"
data-col="5"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #b0bda2;"
/>
</td>
<td>
<span class="table-remove"
><button
type="button"
class="btn btn-danger btn-rounded btn-sm my-0 shadow-none"
>
SUPPRIMER
</button></span
>
</td>
</tr>
</tbody>
<tfoot>
<!-- TOTAL OF COLUMNS -->
<tr style="background-color: #c5d3b6; border-width: 3px;">
<td class="pt-3-half colonne" contenteditable="false">TOTAL</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum"
type="number"
name="sum"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum2"
type="number"
name="sum2"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum3"
type="number"
name="sum3"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td class="pt-3-half" contenteditable="false">
<input
disabled="disabled"
id="sum4"
type="number"
name="sum4"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td contenteditable="false">
<input
disabled="disabled"
id="sum5"
type="number"
name="sum5"
value=""
placeholder="0"
class="form-control form-control-sm border border-0 text-center"
style="background-color: #c5d3b6;"
/>
</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- Editable table -->
<script src="./src/index.js"></script>
</body>