使用JS添加行时的动态列总和
Dynamic column sum total when adding a row with JS
有人可以帮忙吗？我有一个带有列总和的 editable table，使用 HTML 和 JS.
我尝试添加一行，它工作正常，但是当我在新行中输入值时，我的总列没有动态变化，它只有在我使用另一行后才会变化。
我只是想知道当我添加新行和编辑值内容时，它是如何动态改变我的列的总数的，而不仅仅是当我使用另一行时。
（抱歉，我还在训练中，如果还不够完美，我是来吸取教训的。）
谢谢，
这是我的代码：
<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);
});
});
当您插入无限数量的元素时，依赖 ID 毫无意义。
在下面的解决方案中，我在 tbody 中的每个 input 上添加了 data-col 属性，因此我可以轻松找到它所属的列。之后，我遍历触发事件的列中的每个 input，以计算总数。最后，我在同一列的 tfoot 中更新了 input 的值。
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>
有人可以帮忙吗？我有一个带有列总和的 editable table，使用 HTML 和 JS.
我尝试添加一行，它工作正常，但是当我在新行中输入值时，我的总列没有动态变化，它只有在我使用另一行后才会变化。
我只是想知道当我添加新行和编辑值内容时，它是如何动态改变我的列的总数的，而不仅仅是当我使用另一行时。
（抱歉，我还在训练中，如果还不够完美，我是来吸取教训的。）
谢谢，
这是我的代码：
<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);
});
});
当您插入无限数量的元素时，依赖 ID 毫无意义。
在下面的解决方案中，我在 tbody 中的每个 input 上添加了 data-col 属性，因此我可以轻松找到它所属的列。之后，我遍历触发事件的列中的每个 input，以计算总数。最后，我在同一列的 tfoot 中更新了 input 的值。
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>