Subtract HTML Textbox Values using jQuery / JavaScript - javascript

I want to subtract the values once a user put the value in textfield but unable to do so. Here is an example of sum but I want it same for subtracting:
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</tbody>
</table>
Here is jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var sum = 0;
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>


You can add a total value, and substract every time you insert something new.
$(document).ready(function(){
$("#sum").data('total', 600).html(600); // add total value of 600
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var $sum = $("#sum");
var sum = parseInt($sum.data('total'), 10); // get total value
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum -= parseFloat(this.value);
}
});
$sum.html(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td></td>
<td align="right">Total: </td>
<td align="center"><span id="sum"></span></td>
</tr>
</tbody>
</table>

Related

The HTML is not updating on Jquery selector

I'm trying to retrive the HTML of element on click. This is the snippet
$( () => {
$( document ).on('click', 'button', function(){
const html = $('table').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
If I set a new value on the input element of each row, I expect a table HTML with input's value attribute with the correct strings
I don't know why the DOM is not updating, I added changes to the table's HTML, and it looks like as not changes. I tried to find the changes on different indexes and functions
$('table')[0].outerHTML
$('table')[0].innerHTML
$('table').clone().html()
$('table').html()
No one has the correct HTML. If I browse on the developer tools -> Elements tab I see the changes, but I can't retrieve them.
What do you propouse?

See comment inline:
$( () => {
$( document ).on('click', 'button', function(){
// Set the value attribute in the HTML to the entered value
$("input").attr("value", $("input").val());
const html = $('div').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text">
<button>Save</button>
</div>

Update: You would have to map each field value to an array and set the values as attributes on the clone.
So, you can follow this pattern for other input like e.g. select.
serializeSelectValues – access and store the values
applySerializedSelect – apply the values
Note: If you want to handle advanced cloning, you will need to provide names with your input fields.
(($) => {
$.fn.reduce = function(callback, initial) {
return Array.prototype.reduce.call(this, callback, initial)
}
$.fn.serializeInputValues = function() {
return this.find('input').reduce((valueArr, input, index) => {
return valueArr.concat($(input).val())
}, [])
}
$.fn.applySerializedInput = function(serialized) {
this.find('input').each((index, input) => {
if (serialized[index]) $(input).attr('value', serialized[index])
})
return this
}
$.fn.cloneSerialized = function() {
return this.clone().applySerializedInput(this.serializeInputValues())
}
})(jQuery)
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').cloneSerialized())
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
A note on $.fn.clone from the docs.
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.
Alternatively... avoid input fields entirely.
This way you can grab the text value of each cell without all the messy work.
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').clone())
})
});
td { border: thin solid grey }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>

Convert checkboxes as binary values ( '0' for unchecked, '1' for checked) to json data

I have a HTML table which have checkboxes. I want these whole table into JSON data with checkboxes as binary values '0' for unchecked and '1' for checked.
HTML CODE:
<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
<th>PRN NO.</th>
<th>Name</th>
<th>Discrete Maths</th>
<th>ECCF</th>
<th>Data Structures</th>
<th>DLDA</th>
</tr>
</thead>
<tr>
<td>1234568</td>
<td>Smith</td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>7894562</td>
<td>Jackson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
</table>
I'v done this so far, not getting any idea how to do with checkboxes.
JAVASCRIPT CODE FOR JSON:
function html2json() {
var json = '{';
var otArr = [];
var tbl2 = $('#sem3_table').each(function(e) {
x = $(this).children();
var itArr = [];
x.each(function() {
itArr.push('"' + $(this).text() + '"');
});
otArr.push('"' + e + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
return json;
}
The output should be:
"0" : {
"PRN NO" : "12345",
"NAME" : "XYZ",
"DISCRETE MATHS" : "0", //0=> unchecked, 1=> checked
"ECCf" : "1",
"Data structures" : "1",
"DLDA" : "0"
},
"1" : {
//same//
}

Never build JSON format through string concatenation. Build the object/array first, and when you have collected all data into it, only then convert to JSON using JSON.stringify.
Here is how that could work:
function html2json() {
var props = $.map($('#sem3_table th'), function(th) {
return $(th).text();
});
return JSON.stringify($('#sem3_table tr').slice(1).map(function() {
var obj = {};
$(this).children().each(function(i) {
var value = +$("input", this).prop("checked");
obj[props[i]] = isNaN(value) ? $(this).text() : value;
});
return obj;
}).get(), null, 2);
}
$("button").click(function() {
const json = html2json();
console.log(json);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Produce JSON</button>
<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
<th>PRN NO.</th>
<th>Name</th>
<th>Discrete Maths</th>
<th>ECCF</th>
<th>Data Structures</th>
<th>DLDA</th>
</tr>
</thead>
<tr>
<td>1234568</td>
<td>Smith</td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input class="w3-check jill" type="checkbox"></td>
<td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>7894562</td>
<td>Jackson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
<td><input class="w3-check" type="checkbox"></td>
</tr>
</table>

JavaScript to add multiple decimal numbers and round the value after 0.59

Hi I have a script which will add multiple decimal numbers entered in input fields. But Here the value is rounding after 0.99 (like price of item). But I want to rounded it after 0.59. (like seconds).
Please Help me with this. Thanks in Advance.
$(document).ready(function(){
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td>Sunday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Monday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Tuesday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Wednesday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Thrusday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Friday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>Saturday</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr id="summation">
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>

var functionName=function(a){
var b=a-Math.floor(a);
if(b>0.59)
{
a=Math.floor(a)+1;
}
else
{
a=Math.floor(a);
}
return a;
}
And then in your script sum=functionName(sum);

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>

variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>

Calculate the sum of products using a td attribute

I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)

For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/

Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);

Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.

Categories

Resources