I have this dynamic input fields table with dynamic add / remove rows and it works great, instead of the default increment and Decrement arrows inside input number i added plus/ minus buttons but i’m having problem to make it work like i had before with the up down arrows, i appreciate if you could help me.
const
myTable_tBody = document.querySelector('#my-table tbody')
, templateRow = document.querySelector('#template-row')
, myTable_Total = document.querySelector('#my-table tfoot input[name="anstotal"]')
;
AddNewRow(); // first attempt
document.querySelector('#btn-add-row').addEventListener('click', AddNewRow);
myTable_tBody.addEventListener('input', setTotals);
myTable_tBody.addEventListener('click', e =>
{
if (!e.target.matches('button[name="delete-row"]')) return;
e.target.closest('tr').remove();
setTotals();
});
function setTotals()
{
let Total = 0;
[...myTable_tBody.rows].forEach( r =>
{
let inTotal = r.querySelector('input[name="qty"]').valueAsNumber
* +r.querySelector('select[name="sel"]').value;
r.querySelector('input[name="total"]').value = inTotal;
Total += inTotal;
});
myTable_Total.value = Total;
}
function AddNewRow()
{
if (myTable_tBody.rows.length < 4)
myTable_tBody.append( document.importNode(templateRow.content, true) );
else
alert("Maximum Passenger per ticket is 4.");
}
table {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
background : darkblue;
border-collapse : separate;
border-spacing : 1px;
}
th {
background-color : aquamarine;
padding : .8em .4em;
}
td {
background-color : whitesmoke;
padding : .8em .4em;
text-align : right;
}
/* hide the delete button in case of only one row. */
table#my-table tbody tr:only-child button[name="delete-row"] {
visibility : hidden;
}
input[name="qty"] {
width: 90px;
}
.form__number {
display: flex;
position: relative;
justify-content: center;
flex-direction: row;
align-items: center;
min-width: var(--size-min-width);
width: 100%;
border: 1px solid var(--color-input-number-border);
border-radius: 3px;
}
.form__number_input-number {
display: flex;
width: var(--size-min-width);
width: 30%;
height: var(--size);
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
border: 0;
}
.form__number_input-number::-webkit-outer-spin-button,
.form__number_input-number::-webkit-inner-spin-button {
display: none;
}
.form__number_button {
border: 0;
background-color: #fff0;
width: var(--size);
color: var(--color-input-number-button-fg);
cursor: pointer;
border: 1px solid black;
}
.form__number_button:hover {
color: var(--color-link);
}
.form__number_button:active
,.form__number_button:focus {
outline: none !important;
}
.form__number_button::-moz-focus-inner {
border: 0;
}
<button id="btn-add-row">Add new row</button>
<table id="my-table">
<thead> <tr><th>Quantity</th><th>Price</th><th>Total</th><th></th></tr> </thead>
<tbody> </tbody>
<tfoot> <tr><td colspan="3"> TOTAL = <input type="text" name="anstotal" value="0" readonly></td><td></td></tr> </tfoot>
</table>
<template id="template-row">
<tr>
<td>
<button
class="form__number_button form__number_button-minus"
type="button"
onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();"
>
-
</button>
<input type="number" name="qty" value="0" min="0">
<button type="button"
class="form__number_button form__number_button form__number_button-plus"
onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();"
>
+
</button>
</td>
<td>
<select name="sel" >
<option value="0" disabled selected>Choose a price</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td> <input type="text" name="total" value="0" readonly> </td>
<td> <button name="delete-row">Delete</button> </td>
</tr>
</template>