Tech
Forums
Jobs
Books
Events
Videos
Live
More
Interviews
Certification
Training
Career
Members
News
Blogs
Contribute
An Article
A Blog
A Video
An Ebook
An Interview Question
Register
Login
1
Answer
Change Cell Content Salary Or Bonus change total same time
ahmed salah
8y
217
1
Reply
Hi i have table have 5 comnun
Name Salary Bonus Deduction Total
ahmed 500 500 100 900
calculation of total is
Total=Salary+Bonus-Deduction
and total in red color according to my code
what i need actually if i changed in Salary cell or Bonus cell or Deduction cell affect in total cell
suppose i added row above then edit salary
from 500 to 2000 meaning in this time row will be as bellow
ahmed 2000 500 100 2400
total will be 2400 with green color
how to do by changing cell in table affect in total
if i changed 500 to 2000 total must be 2400 in same time
@{
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 tr"
).each(function () {
var total = $(
this
).find(
"td:nth-child(5)"
).html();
if
(parseInt(total)>1000)
{
$(
this
).find(
"td:nth-child(5)"
).css(
"background-color"
,
"green"
);
}
if
(parseInt(total) < 1000) {
$(
this
).find(
"td:nth-child(5)"
).css(
"background-color"
,
"red"
);
}
if
(parseInt(total) == 1000) {
$(
this
).find(
"td:nth-child(5)"
).css(
"background-color"
,
"yellow"
);
}
});
});
$(
"#tb"
).on(
"click"
,
"tr"
, function () {
$(
this
).find(
"td"
).slice(0, 4).prop(
"contenteditable"
,
true
);
});
});
</script>
<style>
.red{
color:#ff0000;
font-weight:bold;
}
</style>
</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>
Post
Reset
Cancel
Answers (
1
)
Next Recommended Forum
Dynamic generate id
How To Make Total For Every Column By Using Jquery