I have this dynamic input fields table with dynamic add / remove rows and it works great,
i like to add other dropdowns and also instead of having a number in value attribute like i had before i like to make value as an object that holds multiple variable and calculate everything to multiple results (Totals)
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.");
}
function calc() {
var pencil = 0;
var ruler = 0;
var highlighter = 0;
var select_val = 0;
$("#template-row select#prod_list").each(function () {
select_val = this.value;
switch (select_val) {
case "product_first_price":
pencil += 10;
ruler += 11;
highlighter += 13;
break;
case "product_second_price":
pencil += 14;
ruler += 16;
highlighter += 17;
break;
case "product_third_price":
pencil += 18;
ruler += 19;
highlighter += 20;
break;
default:
select_val += 0;
}
});
$("#pencil").text(pencil);
$("#ruler").text(ruler);
$("#highlighter").text(highlighter);
} <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> <input type="number" name="qty" value="0" min="0"> </td>
<td>
<select id="prod_list" name="sel" >
<option value="0" disabled selected>Choose a price</option>
<option value="product_first_price">Product one</option>
<option value="product_second_price">Product two</option>
<option value="product_third_price">Product three</option>
</select>
</td>
<td> <input type="text" name="total" value="0" readonly> </td>
<td> <button name="delete-row">Delete</button> </td>
</tr>
</template>
<td>
<select id="prod_list" name="sel" >
<option value="0" disabled selected>Choose a price</option>
<option value="products4_prices">Product one</option>
<option value="products5_prices">Product two</option>
<option value="products6_prices">Product three</option>
</select>
</td>
<div class="produc_total">
<div>
Pencil:
<span id="pencil" ></span>
</div>
<div>
Ruler:
<span id="ruler"></span>
</div>
<div>
Highlighter:
<span id="highlighter"></span>
</div>
</div>
</div><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> <input type="number" name="qty" value="0" min="0"> </td>
<td>
<select id="prod_list" name="sel" >
<option value="0" disabled selected>Choose a price</option>
<option value="product_first_price">Product one</option>
<option value="product_second_price">Product two</option>
<option value="product_third_price">Product three</option>
</select>
</td>
<td> <input type="text" name="total" value="0" readonly> </td>
<td> <button name="delete-row">Delete</button> </td>
</tr>
</template>
<td>
<select id="prod_list" name="sel" >
<option value="0" disabled selected>Choose a price</option>
<option value="products4_prices">Product one</option>
<option value="products5_prices">Product two</option>
<option value="products6_prices">Product three</option>
</select>
</td>
<div class="produc_total">
<div>
Pencil:
<span id="pencil" ></span>
</div>
<div>
Ruler:
<span id="ruler"></span>
</div>
<div>
Highlighter:
<span id="highlighter"></span>
</div>
</div>
</div>
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.");
}
function calc() {
var pencil = 0;
var ruler = 0;
var highlighter = 0;
var select_val = 0;
$("#template-row select#prod_list").each(function () {
select_val = this.value;
switch (select_val) {
case "product_first_price":
pencil += 10;
ruler += 11;
highlighter += 13;
break;
case "product_second_price":
pencil += 14;
ruler += 16;
highlighter += 17;
break;
case "product_third_price":
pencil += 18;
ruler += 19;
highlighter += 20;
break;
default:
select_val += 0;
}
});
$("#pencil").text(pencil);
$("#ruler").text(ruler);
$("#highlighter").text(highlighter);
}
i tried to assigne a variable to the value in select option i used a switch case statement but it doesn’t seem to work. maybe there is an easier way.