Develop Reference

Group all the similar id as one in jquery

I create an dyamic form with Jquery, there will be the multiple select box and textbox, how can I group the data into one based on the user name. For example, there will be the multiple select box = lim, total = 20, how can I group this 2 into array as 1.
When click the save button the final data will be like below
array(
'lim' => 40,
'tan' => 10,
);
Code here: https://jsfiddle.net/7gbvfjdc/

You mean something like this ?
You save button event listener should have following code
$('.savebtn').on('click', function() {
var mapObj = {};
$('.listable .cb').each(function(index, item) {
var selectVal = $(this).find('select').val();
if (mapObj[selectVal]) {
mapObj[selectVal] += Number($(this).find('#amt1_' + index).val());
} else {
mapObj[selectVal] = Number($(this).find('#amt1_' + index).val());
}
});
console.log(mapObj);
});
var i = 0;
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr class="cb" id="row_' + i + '"><td>';
tr += '<select class="form-control select2" id="name1_' + i + ' first" name="name[]">';
tr += '<option>tan</option><option>lim</option></select></td>';
tr += '<td><input type="number" name="winlose[]" id="amt1_' + i + '" class="form-control"></td>';
tr += '<td style="text-align:center">-';
tr += '</td></tr>';
i++;
$('tbody').append(tr);
}
$('tbody').on('click', '.remove', function() {
$(this).parent().parent().remove();
});
$('.savebtn').on('click', function() {
var mapObj = {};
$('.listable .cb').each(function(index, item) {
var selectVal = $(this).find('select').val();
if (mapObj[selectVal]) {
mapObj[selectVal] += Number($(this).find('#amt1_' + index).val());
} else {
mapObj[selectVal] = Number($(this).find('#amt1_' + index).val());
}
});
console.log(mapObj);
});
<table class="table table-bordered listable">
<thead>
<tr class="text-center">
<th>name</th>
<th>amount</th>
<th style="text-align:center">+</th>
</tr>
</thead>
<tbody class="text-center">
</tbody>
</table>
<button type="button" class="btn btn-primary savebtn">Save</button>

You can use reduce on the body trs to extract the data and sum it in the wanted object format. Like this:
const result = $('tbody tr').get().reduce((prev, ne) => {
const $this = $(ne);
const type = $this.find('select').val();
prev[type] += parseInt($this.find('input').val())
return prev;
}, {
lim: 0,
tan: 0
});
var i = 0;
$('.addRow').on('click', function() {
addRow();
/*
$('.select2').select2({
theme: 'bootstrap4',
ajax: {
url: '{{ route("getMember") }}',
dataType: 'json',
},
}); */
});
function addRow() {
i++;
var tr = '<tr id="row_' + i + '"><td>';
tr += '<select class="form-control select2" id="name1_' + i + ' first" name="name[]">';
tr += '<option>tan</option><option>lim</option></select></td>';
tr += '<td><input type="number" name="winlose[]" id="amt1_' + i + '" class="form-control"></td>';
/* tr += '<td><select class="form-control select2" id="name2_'+i+'" name="name2[]">';
tr += '<option>tan</option><option>lim</option></select></td>';
tr += '<td><input type="number" name="winlose[]" id="amt2_'+i+'" class="form-control"></td>'; */
tr += '<td style="text-align:center">-';
tr += '</td></tr>';
$('tbody').append(tr);
}
$('tbody').on('click', '.remove', function() {
$(this).parent().parent().remove();
});
$('button').on('click', () => {
const result = $('tbody tr').get().reduce((prev, ne) => {
const $this = $(ne);
const type = $this.find('select').val();
prev[type] += parseInt($this.find('input').val())
return prev;
}, {
lim: 0,
tan: 0
});
console.log(result)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr class="text-center">
<th>name</th>
<th>amount</th>
<th>Second name</th>
<th>Second amount</th>
<th style="text-align:center">+</th>
</tr>
</thead>
<tbody class="text-center">
</tbody>
</table>
<button>
save
</button>
https://jsfiddle.net/moshfeu/20kczto7/14/

jQuery sum the values of table rows

hello i have this table
i want to get the total of each row in the total column
jQuery
//Monthly Marketing Cost Report
$.get('/dashboard/costs', function(data){
$.each(data,function(i,value){
var leads = $('#leads');
var budget_total_year = $('#full_year_cost');
var budget_total_month = $('#share_cost');
var budget_per_lead = $('#cost_per_lead');
leads.append('<th>' + value.olxTotal + '</th>');
budget_total_year.append('<th>' + value.budget_total_year + '</th>');
budget_total_month.append('<th>' + value.budget_total_month + '</th>');
budget_per_lead.append('<th>' + value.budget_per_lead + '</th>');
})
})
HTML
<tbody id="tableData-marketMonth">
<tr id="leads">
<th>Leads</th>
</tr>
<tr id="full_year_cost">
<th>Full Year Cost</th>
</tr>
<tr id="share_cost">
<th>{{date('F')}} Share of Cost</th>
</tr>
<tr id="cost_per_lead">
<th>Cost per Lead</th>
</tr>
</tbody>
i was going to calculate the total through php but i though it can be easier
using jQuery just putting the sum of each row at the end
Thank you very much

Create variables before the loop. add to the variables in the loop and then assign the sum at the end.
$.get('/dashboard/costs', function(data){
var sumLeads = 0;
var sumFullYearCost = 0;
var sumShareCost = 0;
var sumCostPerLead = 0;
var tr_leads = $('#leads');
var tr_budget_total_year = $('#full_year_cost');
var tr_budget_total_month = $('#share_cost');
var tr_budget_per_lead = $('#cost_per_lead');
$.each(data,function(i,value){
tr_leads.append('<th>' + value.olxTotal + '</th>');
tr_budget_total_year.append('<th>' + value.budget_total_year + '</th>');
tr_budget_total_month.append('<th>' + value.budget_total_month + '</th>');
tr_budget_per_lead.append('<th>' + value.budget_per_lead + '</th>');
sumLeads += value.olxTotal;
sumFullYearCost += value.budget_total_year;
sumShareCost += value.budget_total_month;
sumCostPerLead += value.budget_per_lead;
});
tr_leads.append('<th>' + sumLeads + '</th>');
tr_budget_total_year.append('<th>' + sumFullYearCost + '</th>');
tr_budget_total_month.append('<th>' + sumShareCost + '</th>');
tr_budget_per_lead.append('<th>' + sumCostPerLead + '</th>');
});

Example for leads row using Array.map and Array.reduce. Use jQuery to get the td elements.
var leads = $('#leads');
const total = leads.children('td').toArray().map(x=>Number(x.innerHTML)).reduce((sum, x) => sum + x)
leads.append(`<th>${total}</th>`);

Try something like this.
$('#tableData-marketMonth tr').each(function () {
var row = $(this);
var rowTotal = 0;
$(this).find('th').each(function () {
var th = $(this);
if ($.isNumeric(th.text())) {
rowTotal += parseFloat(th.text());
}
});
row.find('th:last').text(rowTotal);
});
NOTE: change 'th' to 'td' if you have td's. Looking at your jquery, it looks like you are appending th's.

You can use my written code to vote if you like it...
HTML
<table>
<thead>
<tr>
<th>MAX ATK</th>
<th>MAX DEF</th>
<th>MAX HP</th>
<th>Overall</th>
</tr>
</thead>
<tbody>
<tr>
<td class="combat">8170</td>
<td class="combat">6504</td>
<td class="combat">6050</td>
<td class="total-combat"></td>
</tr>
<tr>
<td class="combat">8500</td>
<td class="combat">10200</td>
<td class="combat">7650</td>
<td class="total-combat"></td>
</tr>
<tr>
<td class="combat">9185</td>
<td class="combat">7515</td>
<td class="combat">9185</td>
<td class="total-combat"></td>
</tr>
</tbody>
</table>
jquery
$(document).ready(function () {
//iterate through each row in the table
$('tr').each(function () {
//the value of sum needs to be reset for each row, so it has to be set inside the row loop
var sum = 0
//find the combat elements in the current row and sum it
$(this).find('.combat').each(function () {
var combat = $(this).text();
if (!isNaN(combat) && combat.length !== 0) {
sum += parseFloat(combat);
}
});
//set the value of currents rows sum to the total-combat element in the current row
$('.total-combat', this).html(sum);
});
});

How to Add data in tbody using Javascript only

This is my Javascript function:
function SaveCustomdata() {
var customName = document.getElementById("lblNAME").value;
var customEmail = document.getElementById("lblEmail").value;
var customContectNo = document.getElementById("lblContectNO").value;
var row = "";
row += '<tr><td>' + customName + '</td><td>' + customEmail + '</td><td>' + customContectNo + '</td></tr>';
document.getElementById("Customdata").appendChild(row);
}
HTML code where I want to append the data:
<table>
<thead>
<tr>
<th style=" color:#01A0DF; padding-right:60px;">Name</th>
<th style=" color:#01A0DF; padding-right:70px;">Email</th>
<th style=" color:#01A0DF; padding-right:90px;">Contect/Mobile No</th>
<td>
<input type="button" id="btnclick" value="Add" onclick="AddRecord()" />
</td>
</tr>
</thead>
<tbody id="Customdata"></tbody>
</table>
Getting an error:
0x800a139e - JavaScript run time error: Hierarchy Request Error

With the use of innerHTML:
function SaveCustomdata() {
var customName = document.getElementById("lblNAME").value;
var customEmail = document.getElementById("lblEmail").value;
var customContectNo = document.getElementById("lblContectNO").value;
var row = "";
row += '<tr><td>' + customName + '</td><td>' + customEmail + '</td><td>' + customContectNo + '</td></tr>';
// get the current table body html as a string, and append the new row
var html = document.getElementById("Customdata").innerHTML + row;
// set the table body to the new html code
document.getElementById("Customdata").innerHTML = html;
}

Here you have a fiddle. Let us know if it helped you a bit.Basically you could use .innerHTML for appending strings as elements, because this gets "evaluated by browser".Otherwise you would have to do it programmatically as mentioned in the comments

Dynamically add or delete rows in a table using jQuery

Dynamically add or delete rows in a table using jQuery but how to keep data in arrays after removing a row and don't get the totalSum when I add new row after deleting previous one .row add sucessfully and get initial sum but aftre remove operation i get NAN total sum
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
function validation() {
if (document.getElementById(txt_item).value == "")
alert("Please Enter a Item name");
return false;
if (document.getElementById(txt_price).value == "")
alert("Please Enter Price");
return false;
if (document.getElementById(txt_quantity).value == "")
alert("Please Enter Quantity");
return false;
}
</script>
<script>
var itemCount = 0;
$(document).ready(function () {
var array = [];
$("#txt_item").focus();
$("#txt_quantity").keydown(function (e) {
var code = e.keyCode || e.which
if (code === 9) {
var table = "";
var arr = {
"Row_ID": itemCount,
"TXT_ITEM": $("#txt_item").val(),
"TXT_PRICE": $("#txt_price").val(),
"TXT_QUANTITY": $("#txt_quantity").val(),
"TOTAL_AMOUNT": $("#txt_price").val() * $("#txt_quantity").val()
}
array.push(arr);
itemCount++;
table = "<tr id='" + itemCount + "'><td>" + arr['TXT_ITEM'] + "</td><td id='price_"+itemCount+"'>" + arr['TXT_PRICE'] + "</td><td><input type='text' id='quantity_"+itemCount+"' value='" + arr['TXT_QUANTITY'] + "'></td><td id='" + itemCount + "_total'>" + parseInt(arr['TXT_PRICE']) * parseInt(arr['TXT_QUANTITY']) + "</td><td><input type='button' id='" + itemCount + "' class='btn' value='Remove'></td></tr>";
$("#test1").append(table);
totalSum();
$(".btn").click(function () {
var buttonId = $(this).attr("id");
//var value_quantity = $(this).val();
//buttonId = buttonId.replace("tr", "").trim();
//var value_price = $("#price_" + buttonId).text();
//var value_total_price = parseInt($("#"+buttonId+"_total").text());
//var tamount=parseInt($("#total_amount").text());
//$("#total_amount").text(tamount - value_total_price);
////alert(tamount);
//alert(value_total_price);
$("#" + buttonId).remove();
array.splice(buttonId - 1, 1);
//itemCount--;
totalSum();
Array_IDs();
itemCount = array.length + 1;
});
$("#quantity_" + itemCount).keydown(function (e) {
var code = e.keyCode || e.which
if (code === 9)
var value_quantity = $(this).val();
var rowId = $(this).closest('tr').attr('id');
rowId = rowId.replace("tr", "").trim();
var value_price = $("#price_" + rowId).text();
if (value_quantity >= 0)
{
$("#" + rowId+"_total").text(value_price * value_quantity);
totalSum();
}
});
$("#txt_item").val("");
$("#txt_price").val("");
$("#txt_quantity").val("");
}
function totalSum() {
var total = 0;
var rows = array.length;
for (var i = 1; i <= rows; i++) {
total += parseInt($("#" + i + "_total").text());
//total += parseInt(array[i].TXT_PRICE * array[i].TXT_QUANTITY);
}
$("#total_amount").text(total);
//alert(total);
}
function Array_IDs()
{
for (var i = 0; i < array.length; i++) {
array[i].Row_ID = i + 1;
//alert(i);
}
//$("#test1 tr").remove();
}
});
});
</script>
</head>
<body>
<table id="test1">
<tr>
<td>Item Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Amount</td>
<td>Action</td>
</tr>
<tfoot>
<tr>
<td><input type="text" id="txt_item" /></td>
<td><input type="text" id="txt_price" /></td>
<td><input type="text" id="txt_quantity" /></td>
<td id="total_price" align="center"></td>
</tr>
<tr>
<td></td>
<td>#*<input type="button" id="add_button" value="Add Row" />*#</td>
<td align="right">Total Amount:</td>
<td id="total_amount" align="center"></td>
</tr>
</tfoot>`enter code here`
</table>
<table id="test2" width="50%"></table>
</body>
</html>

<html>
<head>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
function validation() {
if (document.getElementById(txt_item).value == "")
alert("Please Enter a Item name");
return false;
if (document.getElementById(txt_price).value == "")
alert("Please Enter Price");
return false;
if (document.getElementById(txt_quantity).value == "")
alert("Please Enter Quantity");
return false;
}
var itemCount = 0;
$(document).ready(function () {
var array = [];
$("#txt_item").focus();
$("#txt_quantity").keydown(function (e) {
var code = e.keyCode || e.which
if (code === 9) {
var table = "";
var iPrice = 0;
if ($("#txt_price").val() == "" || isNaN($("#txt_price").val())) {
iPrice = 0;
}
else {
iPrice = parseInt($("#txt_price").val(), 10);
}
var iQuatity = 0;
if ($("#txt_quantity").val() == "" || isNaN($("#txt_quantity").val())) {
iQuatity = 0;
}
else {
iQuatity = parseInt($("#txt_quantity").val(), 10);
}
szTotal = iPrice * iQuatity;
var arr = {
"Row_ID": itemCount,
"TXT_ITEM": $("#txt_item").val(),
"TXT_PRICE": iPrice,
"TXT_QUANTITY": iQuatity,
"TOTAL_AMOUNT": szTotal
}
array.push(arr);
itemCount++;
table = "<tr id='" + itemCount + "'><td>" + arr['TXT_ITEM'] + "</td><td id='price_" + itemCount + "'>" + arr['TXT_PRICE'] + "</td><td><input type='text' id='quantity_" + itemCount + "' value='" + arr['TXT_QUANTITY'] + "'></td><td class='td_total' id='" + itemCount + "_total'>" + parseInt(arr['TXT_PRICE']) * parseInt(arr['TXT_QUANTITY']) + "</td><td><input type='button' id='" + itemCount + "' class='btn' value='Remove'></td></tr>";
$("#test1 tbody").append(table);
totalSum();
$(".btn").click(function () {
var buttonId = $(this).attr("id");
//var value_quantity = $(this).val();
//buttonId = buttonId.replace("tr", "").trim();
//var value_price = $("#price_" + buttonId).text();
//var value_total_price = parseInt($("#"+buttonId+"_total").text());
//var tamount=parseInt($("#total_amount").text());
//$("#total_amount").text(tamount - value_total_price);
////alert(tamount);
//alert(value_total_price);
$("#" + buttonId).remove();
array.splice(buttonId - 1, 1);
//itemCount--;
totalSum();
Array_IDs();
itemCount = array.length + 1;
});
$("#quantity_" + itemCount).keydown(function (e) {
var code = e.keyCode || e.which
if (code === 9)
var value_quantity = 0;
if ($(this).val() != "" && !isNaN($(this).val()))
{
value_quantity = parseInt($(this).val(),10)
}
var rowId = $(this).closest('tr').attr('id');
rowId = rowId.replace("tr", "").trim();
var value_price = 0;
if ($("#price_" + rowId).text() != "" && !isNaN($("#price_" + rowId).text())) {
value_price=parseInt($("#price_" + rowId).text(),10);
}
if (value_quantity >= 0) {
$("#" + rowId + "_total").text(value_price * value_quantity);
totalSum();
}
});
$("#txt_item").val("");
$("#txt_price").val("");
$("#txt_quantity").val("");
}
function totalSum() {
var total = 0;
//var rows = array.length;
//for (var i = 1; i <= rows; i++) {
// total += parseInt($("#" + i + "_total").text());
// //total += parseInt(array[i].TXT_PRICE * array[i].TXT_QUANTITY);
//}
$('.td_total').each(function () {
if (!isNaN($.trim($(this).text())) && $.trim($(this).text()) != "")
{
total = total+parseInt($(this).text(),10)
}
});
$("#total_amount").text(total);
//alert(total);
}
function Array_IDs() {
for (var i = 0; i < array.length; i++) {
array[i].Row_ID = i + 1;
//alert(i);
}
//$("#test1 tr").remove();
}
});
});
</script>
</head>
<body>
<table id="test1">
<tr>
<td>Item Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Amount</td>
<td>Action</td>
</tr>
<tbody></tbody>
<tfoot>
<tr>
<td><input type="text" id="txt_item" /></td>
<td><input type="text" id="txt_price" /></td>
<td><input type="text" id="txt_quantity" /></td>
<td id="total_price" align="center"></td>
</tr>
<tr>
<td></td>
<td>#*<input type="button" id="add_button" value="Add Row" />*#</td>
<td align="right">Total Amount:</td>
<td id="total_amount" align="center"></td>
</tr>
</tfoot>`enter code here`
</table>
<table id="test2" width="50%"></table>
</body>
</html>

Unable to retieve the particular value of cell on table using javascript

I am using the following code to retrieve the values of a particular cell of a table.:
function addCatAttr()
{
var tbl = document.getElementById("tblAttributes1");
if (tbl.rows.length > 1)
{
for ( var i = 1 ; i < tbl.rows.length ; i++ )
{
var r = tbl.rows[i];
var catname1 =r.cells[0].document.getElementsByTagName("input").item(1).value;
var lifecycycleattr1 = r.cells[0].document.getElementsByTagName("input").item(2).value;
var stateattr1 = r.cells[0].document.getElementsByTagName("input").item(3).value;
}
}
}
and my html code is :
<table id="tblAttributes1">
<tr>
<td>Category</td>
<td>Life Cycle Attribute</td>
<td>State Attribute</td>
</tr>
<tr>
<td>cat1</td>
<td>pf</td>
<td>state</td>
</tr>
</table>
I want to retrieve each value of a particular.
Its just an example.I have more thane two rows for which i need for loop to get the values of each cell.

See if this points you in the right direction:
function addCatAttr()
{
var tbl = document.getElementById("tblAttributes1");
if (tbl.rows.length > 1)
{
for ( var i = 1 ; i < tbl.rows.length ; i++ )
{
var r = tbl.rows[i];
var catname1 =r.cells[0].innerText;
var lifecycycleattr1 = r.cells[1].innerText;
var stateattr1 = r.cells[2].innerText;
alert('catname1: ' + catname1 + '\r\n' +
'lifecycycleattr1: ' + lifecycycleattr1 + '\r\n' +
'stateattr1: ' + stateattr1 + '\r\n');
}
}
}
<table id="tblAttributes1">
<tr>
<td>Category</td>
<td>Life Cycle Attribute</td>
<td>State Attribute</td>
</tr>
<tr>
<td>cat1</td>
<td>pf</td>
<td>state</td>
</tr>
</table>
<input type="button" onclick="addCatAttr()" value="Click me" />

This can help better...
function addCatAttr()
{
var tbl = document.getElementById("tblAttributes1");
if (tbl.rows.length > 1)
{
for ( var i = 1 ; i < tbl.rows.length ; i++ )
{
var r = tbl.rows[i];
var catname1 =r.cells[0].innerHTML;
var lifecycycleattr1 = r.cells[1].innerHTML;
var stateattr1 = r.cells[2].innerHTML;
alert('catname1: ' + catname1 + '\r\n' +
'lifecycycleattr1: ' + lifecycycleattr1 + '\r\n' +
'stateattr1: ' + stateattr1 + '\r\n');
}
}
}
<table id="tblAttributes1">
<tr>
<td>Category</td>
<td>Life Cycle Attribute</td>
<td>State Attribute</td>
</tr>
<tr>
<td>cat1</td>
<td>pf</td>
<td>state</td>
</tr>
</table>
<input type="button" onclick="addCatAttr()" value="Click me" />

You need to apply two for loops one for table length and the other for the each td in tr. This is the code.
var table = document.getElementById('tblAttributes1'),
rows = table.getElementsByTagName('tr');
for (var i = 0; i< rows.length; i++) {
var tds = rows[i].getElementsByTagName('td');
for(var x=0;x<tds.length;x++){
console.log(tds[x].innerHTML);
}
And the fiddle is-
http://jsfiddle.net/09q6n3m2/16/