How to make total for every column by using jquery

Posted by Ahmedsa under jQuery on 7/30/2016 | Points: 10 | Views : 157 | Status : [Member] | Replies : 1
Name salary Bonus Deduction total
mickel 500 600 300 800
adil 600 600 600 600
total 1100 1200 900 1400
how to make total for every column meaning how to do total found last line for all column

total 1100 1200 900 1400
my code as following
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var x = $("#txt1").val();
var y = $("#txt2").val();
var z = $("#txt3").val();
var M = $("#txt4").val();
var L = parseInt(y) + parseInt(z) - parseInt(M);

$("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
});
$("#tb").on("click", "tr", function () {

$(this).find("td").slice(0, 4).prop("contenteditable", true);

});

});
</script>
</head>
<body>
<div>
Name<input type="text" id="txt1" /><br />
Salary<input type="text" id="txt2" /><br />
Bonus<input type="text" id="txt3" /><br />
Deduction<input type="text" id="txt4" /><br />
<input type="button" value="add" id="btn" />
<table>
<thead>
<tr>
<td>
Name
</td>
<td>
Salary

</td>
<td>
Bonus
</td>
<td>
Deduction
</td>
<td>
total
</td>
</tr>
</thead>
<tbody id="tb" class="tb1"></tbody>
</table>
</div>
</body>
</html>





Responses

Posted by: Bhuvanesh6 on: 7/31/2016 [Member] Starter | Points: 25

Up
0
Down
Hi,
You can assign the variable for the row of data and traverse through each of the dataRow and add the value of each datarow element and sum the value and finally assign to the total column.

Bhuvan

Ahmedsa, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response