We Keep Coding

How to export my html table to excel ignoring hidden rows?

I want to export an html table to excel, if you are testing my code right now the export works perfectly fine except for a small detail, as you can see I made multiple search box in my table, if you don't search anything the button will export everything, that's good, if you search something and then click on import, on the excel file you will see that the rows that were hidden by the search will also be export but they will also be hidden in the file, and I wonder if it's possible to not export the row that are hidden but only those that are displayed.
function search(tableId) {
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
for (var i = 2; i < rows.length; i++) {
var hide = false;
var cells = rows[i].getElementsByTagName("td");
for (var j = 0; j < cells.length; j++) {
var input = document.getElementById("REC_" + j);
if (input && cells[j].innerHTML.toLowerCase().indexOf(input.value.toLowerCase()) == -1) {
hide = true;
break;
}
}
if (hide) {
rows[i].style.display = "none";
} else {
rows[i].style.display = "";
}
}
}
function htmlTableToExcel(type, tableId) {
var data = document.getElementById(tableId);
var excelFile = XLSX.utils.table_to_book(data, {
sheet: "sheet1"
});
XLSX.write(excelFile, {
bookType: type,
bookSST: true,
type: 'base64'
});
XLSX.writeFile(excelFile, 'MyTable.' + type);
}
#MyTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#MyTable th,
#MyTable td {
text-align: center;
padding: 12px;
}
#MyTable tr {
border-bottom: 1px solid #ddd;
}
#MyTable th,
#MyTable tr:hover {
background-color: #f1f1f1;
}
.divider {
border-top: 3px solid #bbb;
}
hr.solid {
border-top: 3px solid #bbb;
}
/*#myTable thead th {
position: sticky;
top: 0;
resize: horizontal;
overflow: auto;
min-width: 70px;
}*/
#MyTable thead tr {
position: relative;
}
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
border-right: 2px solid silver;
}
.resizer:hover,
.resizing {}
.resizable {
border: 1px solid gray;
height: 100px;
width: 100px;
position: relative;
}
<script type="text/javascript" src="https://unpkg.com/xlsx#0.15.1/dist/xlsx.full.min.js"></script>
<button onclick="htmlTableToExcel('xlsx', 'MyTable')">Excel</button>
<table id="MyTable">
<thead>
<tr class="header">
<th style="">Name </th>
<th style="">Country </th>
<th style="">Num1 </th>
<th style="">Num2 </th>
</tr>
</thead>
<tbody>
<tr class="header">
<td> <input type="text" id="REC_0" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_1" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_2" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_3" onkeyup="search('MyTable')"> </td>
</tr>
<tr>
<td style="cursor: pointer">Alfreds Futterkiste</td>
<td>Germany</td>
<td>546</td>
<td>444</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>456</td>
<td>458</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>564</td>
<td>258</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>648</td>
<td>879</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
<td>984</td>
<td>365</td>
</tr>
</tbody>
</table>

I changed the display:hidden to hidden
rows[i].hidden = hide;
and remove the rows before saving - I assume you do not need the input row either
const table = document.getElementById(tableId);
const data = document.createElement('table');
data.innerHTML = table.innerHTML;
data.querySelectorAll('tr').forEach(row => {
if (row.hidden || (row.closest('tbody') && row.matches('.header'))) row.remove()
});
function search(tableId) {
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
for (var i = 2; i < rows.length; i++) {
var hide = false;
var cells = rows[i].getElementsByTagName("td");
for (var j = 0; j < cells.length; j++) {
var input = document.getElementById("REC_" + j);
if (input && cells[j].innerHTML.toLowerCase().indexOf(input.value.toLowerCase()) == -1) {
hide = true;
break;
}
}
rows[i].hidden = hide;
}
}
function htmlTableToExcel(type, tableId) {
const table = document.getElementById(tableId);
const data = document.createElement('table');
data.innerHTML = table.innerHTML;
data.querySelectorAll('tr').forEach(row => {
if (row.hidden || (row.closest('tbody') && row.matches('.header'))) row.remove()
})
console.log(data.outerHTML)
var excelFile = XLSX.utils.table_to_book(data, {
sheet: "sheet1"
});
XLSX.write(excelFile, {
bookType: type,
bookSST: true,
type: 'base64'
});
XLSX.writeFile(excelFile, 'MyTable.' + type);
}
#MyTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#MyTable th,
#MyTable td {
text-align: center;
padding: 12px;
}
#MyTable tr {
border-bottom: 1px solid #ddd;
}
#MyTable th,
#MyTable tr:hover {
background-color: #f1f1f1;
}
.divider {
border-top: 3px solid #bbb;
}
hr.solid {
border-top: 3px solid #bbb;
}
/*#myTable thead th {
position: sticky;
top: 0;
resize: horizontal;
overflow: auto;
min-width: 70px;
}*/
#MyTable thead tr {
position: relative;
}
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
border-right: 2px solid silver;
}
.resizer:hover,
.resizing {}
.resizable {
border: 1px solid gray;
height: 100px;
width: 100px;
position: relative;
}
<script type="text/javascript" src="https://unpkg.com/xlsx#0.15.1/dist/xlsx.full.min.js"></script>
<button onclick="htmlTableToExcel('xlsx', 'MyTable')">Excel</button>
<table id="MyTable">
<thead>
<tr class="header">
<th style="">Name </th>
<th style="">Country </th>
<th style="">Num1 </th>
<th style="">Num2 </th>
</tr>
</thead>
<tbody>
<tr class="header">
<td> <input type="text" id="REC_0" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_1" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_2" onkeyup="search('MyTable')"> </td>
<td> <input type="text" id="REC_3" onkeyup="search('MyTable')"> </td>
</tr>
<tr>
<td style="cursor: pointer">Alfreds Futterkiste</td>
<td>Germany</td>
<td>546</td>
<td>444</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>456</td>
<td>458</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>564</td>
<td>258</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>648</td>
<td>879</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
<td>984</td>
<td>365</td>
</tr>
</tbody>
</table>
Here is a more streamlined version if you like
const table = document.getElementById("MyTable");
const search = () => {
const vals = [...table.querySelectorAll("tr.header input")]
.map(inp => inp.value.trim().toLowerCase());
const empty = vals.every(val => val ==="");
[...table.querySelectorAll("tr")]
.slice(1) // ingore the input field row
.forEach(row => {
row.hidden = !empty && ![...row.querySelectorAll("td")]
.some((cell, i) => {
const val = vals[i];
if (val) {
const cellContent = cell.textContent.toLowerCase();
return val && cellContent.includes(val);
}
return false;
});
});
};
table.addEventListener("input", search);
document.getElementById("toExcel").addEventListener("click", () => {
const table = document.getElementById(tableId);
const data = document.createElement('table');
data.innerHTML = table.innerHTML;
data.querySelectorAll('tr').forEach(row => {
if (row.hidden || (row.closest('tbody') && row.matches('.header'))) row.remove()
})
console.log(data.outerHTML)
var excelFile = XLSX.utils.table_to_book(data, {
sheet: "sheet1"
});
XLSX.write(excelFile, {
bookType: type,
bookSST: true,
type: 'base64'
});
XLSX.writeFile(excelFile, 'MyTable.' + type);
})
#MyTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#MyTable th,
#MyTable td {
text-align: center;
padding: 12px;
}
#MyTable tr {
border-bottom: 1px solid #ddd;
}
#MyTable th,
#MyTable tr:hover {
background-color: #f1f1f1;
}
.divider {
border-top: 3px solid #bbb;
}
hr.solid {
border-top: 3px solid #bbb;
}
/*#myTable thead th {
position: sticky;
top: 0;
resize: horizontal;
overflow: auto;
min-width: 70px;
}*/
#MyTable thead tr {
position: relative;
}
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
border-right: 2px solid silver;
}
.resizer:hover,
.resizing {}
.resizable {
border: 1px solid gray;
height: 100px;
width: 100px;
position: relative;
}
<script type="text/javascript" src="https://unpkg.com/xlsx#0.15.1/dist/xlsx.full.min.js"></script>
<button type="button" id="toExcel">Excel</button>
<table>
<thead>
<tr class="header">
<th style="">Name </th>
<th style="">Country </th>
<th style="">Num1 </th>
<th style="">Num2 </th>
</tr>
</thead>
<tbody id="MyTable">
<tr class="header">
<td> <input type="text" id="REC_0"> </td>
<td> <input type="text" id="REC_1"> </td>
<td> <input type="text" id="REC_2"> </td>
<td> <input type="text" id="REC_3"> </td>
</tr>
<tr>
<td style="cursor: pointer">Alfreds Futterkiste</td>
<td>Germany</td>
<td>546</td>
<td>444</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>456</td>
<td>458</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>564</td>
<td>258</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>648</td>
<td>879</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
<td>984</td>
<td>365</td>
</tr>
</tbody>
</table>

How to show one button element in table column

I may mess up a bit with explaining the problem.
I have a table, if I press my table column name, it will expand and show the input and also a button. The problem begins with showing all the buttons in each column in the beginning of the page, also buttons appear closing/opening while expanding.
What I would like to do, is instead of showing all the buttons in each column, I want to display only one button in the column that got expanded (clicked) and also in one row.
$(document).ready(
function() {
$('th input').slideUp();
$('th a').click(
function() {
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
}
);
}
);
button {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: rgba(1, 1, 1, 0.1);
height: 30px;
width: 70px;
}
table {
display: block;
width: 400px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
max-height: 400px;
overflow: auto;
}
.naitamine2 table {
position: fixed;
width: 700px;
height: ;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
overflow: auto;
}
#table table {
position: fixed;
width: 500px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
}
tr,
th {
border: 1px solid #CCC;
background-color: white;
}
th {
background: #F3F3F3;
font-weight: bold;
}
tr:nth-child(even) th {
background: #4DAF7C;
}
tr:nth-child(odd) th {
background: #FFA400;
}
tr th:hover {
background: #666;
color: #FFF;
}
.butt {
margin-left: 5px;
margin-top: -10px;
height: 10px;
}
table.scroll {
width: 100%;
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td,
thead th {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scroll">
<thead>
<tr>
<th>Name</th>
<th>Product</th>
<th>Price</th>
<th>Avaible</th>
</tr>
</thead>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<table>

$(document).ready( function() {
$('th input').slideUp();
$('th a').click( function() {
$('th input').slideUp();
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
});
});
Not sure if i got your requirement right. But this would show only one button for the column you clicked. Right?

That did not fix my problem, It still shows all the buttons in each column. And also, slide up in click function is soo wrong, because I cant hide my input when I press the column cell again.
I also changed all the table header cells to standard cells.

Prevent double click in JS Calculator

I have generated a JS calculator but have the following problem.
I want to prevent double click of plus, minus, divide buttons for the same time.
I have tried to do it like this
function myPlus(){
form.value += "+"
plus.onclick = ""
}
But it prevents clicking the plus button at all.
I am adding the entire code here.
Will be happy to get help!
https://jsfiddle.net/dbrtv1bg/
var form = document.getElementById("for");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var zero = document.getElementById("zero");
var plus = document.getElementById("plus");
var sum = document.getElementById("minus");
var ap = document.getElementById("ap");
var doub = document.getElementById("double");
var dd = document.getElementById("divide");
var calc = document.getElementById("got");
calc.onclick = myFunction;
one.onclick = myFunction1;
two.onclick = myFunction2;
three.onclick = myFunction3;
four.onclick = myFunction4;
five.onclick = myFunction5;
six.onclick = myFunction6;
seven.onclick = myFunction7;
eight.onclick = myFunction8;
nine.onclick = myFunction9;
zero.onclick = myFunction0;
plus.onclick = myPlus;
doub.onclick = myDouble;
sum.onclick = myFunction10;
dd.onclick = myFunctiondd;
ap.onclick = myAp;
function myFunction1() {
form.value += "1";
}
function myFunction2() {
form.value += "2";
}
function myFunction3() {
form.value += "3";
}
function myFunction4() {
form.value += "4";
}
function myFunction5() {
form.value += "5";
}
function myFunction6() {
form.value += "6";
}
function myFunction7() {
form.value += "7";
}
function myFunction8() {
form.value += "8";
}
function myFunction9() {
form.value += "9";
}
function myFunction0() {
form.value += "0";
}
function myPlus() {
form.value += "+";
}
function myDouble() {
form.value += "*"
}
function myFunction10() {
form.value += "-"
}
function myFunctiondd() {
form.value += "/"
}
function myAp() {
form.value += "."
}
function myFunction() {
var bec = eval(form.value);
form.value = bec;
}
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="for" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first" id="seven">7</td>
<td class="first" id="eight">8</td>
<td class="first" id="nine">9</td>
<td class="second" id="divide">/</td>
</tr>
<tr>
<td class="first" id="four">4</td>
<td class="first" id="five">5</td>
<td class="first" id="six">6</td>
<td class="second" id="double">x</td>
</tr>
<tr>
<td class="first" id="one">1</td>
<td class="first" id="two">2</td>
<td class="first" id="three">3</td>
<td class="second" id="minus">-</td>
</tr>
<tr>
<td class="first" id="zero">0</td>
<td class="first" id="ap">,</td>
<td class="second" id="got">=</td>
<td class="second" id="plus">+</td>
</tr>
</table>
</div>
</div>
</div>

I would suggest merging all of your functions for numbers and symbols together into something like this:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
Then you can change all of the numbers to have the number class and the symbols to have the symbol class.
Then in the symbol click event you have a check on the last clicked.
See below for working example:
var value = document.getElementById('value');
var numbers = document.getElementsByClassName('number');
var symbols = document.getElementsByClassName('symbol');
var evaluate = document.getElementById('got');
var lastClicked = 'symbol';
Array.from(numbers).forEach(function(numberElement) {
var numberValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
lastClicked = 'number';
value.value += numberValue;
});
});
Array.from(symbols).forEach(function(numberElement) {
var symbolValue = numberElement.textContent;
numberElement.addEventListener('click', function() {
if (lastClicked !== 'symbol') {
lastClicked = 'symbol';
value.value += symbolValue;
}
});
});
evaluate.addEventListener('click', function () {
value.value = eval(value.value);
});
.general {
width: 800px;
height: 600px;
background-color: rgb(121, 162, 168);
padding: 50px;
}
.head {
width: 300px;
height: 100px;
background-color: rgb(71, 86, 90);
margin-top: 50px;
margin: auto;
margin-top: 20px;
}
.tools {
width: 300px;
height: 300px;
background-color: white;
margin: auto;
padding-top: 1px;
background-color: rgb(152, 192, 199);
display: table;
}
}
.color {
background-color: rgb(134, 181, 189);
}
.first {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(134, 181, 189);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
.second {
font-size: 30px;
border: 1px rgb(152, 192, 199);
width: 75px;
text-align: center;
font-family: TarusHeavy;
background-color: rgb(125, 204, 218);
color: white;
padding-bottom: 15px;
padding-top: 22px;
}
input {
float: right;
margin-top: 65px;
color: white;
background-color: rgb(71, 86, 90);
font-size: 20px;
border: transparent;
text-align: right;
}
<div class="head">
<form action="" id="myForm">
<input type="text" name="result" id="value" disabled>
</form>
</div>
<div class="tools">
<table>
<tr>
<td class="first number" id="seven">7</td>
<td class="first number" id="eight">8</td>
<td class="first number" id="nine">9</td>
<td class="second symbol" id="divide">/</td>
</tr>
<tr>
<td class="first number" id="four">4</td>
<td class="first number" id="five">5</td>
<td class="first number" id="six">6</td>
<td class="second symbol" id="double">*</td>
</tr>
<tr>
<td class="first number" id="one">1</td>
<td class="first number" id="two">2</td>
<td class="first number" id="three">3</td>
<td class="second symbol" id="minus">-</td>
</tr>
<tr>
<td class="first number" id="zero">0</td>
<td class="first symbol">.</td>
<td class="second evaluate" id="got">=</td>
<td class="second symbol" id="plus">+</td>
</tr>
</table>
</div>
Here is a fiddle also for reference: https://jsfiddle.net/dbrtv1bg/5/

One thing you can try is to declare a variable, e.g. "operatorClicked" that keeps track of whether an operator has been clicked. Initialize it to false. In the operator functions, include an if conditional -- if operatorClicked is true, do nothing. If false, append the operator and set operatorClicked to true. If you go this route, you'll also need to reset operatorClicked to false every time a number is clicked.

Thanks everyone! I got the solution this way
I am recalling myPlus, myDOuble etc functions in the functions that give form the number value and it works :)
function myFunction1(){
form.value +="1";
plus.onclick = myPlus;
doub.onclick =myDouble;
sum.onclick= myFunction10;
dd.onclick = myFunctiondd;
ap.onclick =myAp;
https://jsfiddle.net/agxvvr73/

how to remove this currency mark from js?

How to remove this "Rs." part from this js ? if i remove it html page not providing correct value its not working well i wannt stop replacing "Rs." on to my html page ?
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("Rs.","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("Rs.","") - $("#paid").val().replace("Rs.","");
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("Rs.","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("Rs."+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">Rs.0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">Rs.0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<?php
function wlcmMsg() {
echo "Welcome ! ".$name=$_SESSION['adminlog'];
}
session_start();
if(!isset($_SESSION['adminlog'])){
}
else if(isset($_SESSION['adminlog'])){
echo '<table align="right" border="0" class="dontprint">
<tr width="50%"><td>Hi! '.$name=$_SESSION['adminlog']; echo '</td>
<td><form align="right" action="menu.php"><input type="submit" value="Back" /></form></td>
<td><form align="right" action="logout.php"><input type="submit" value="logout" id="search"/></form></td>
</tr></table>';
}
//connecting to the database
define('DB_HOST', 'localhost');
define('DB_NAME', 'infinitiabill');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
//inserting Record to the database
$result = mysql_query('SELECT InvoiceNo FROM billdata ORDER BY InvoiceNo DESC LIMIT 1;');
if (mysql_num_rows($result) > 0) {
$max_InvoiceNo = mysql_fetch_row($result);
//echo $max_InvoiceNo[0]; //Here it is
}
mysql_close($con);
?>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due Rs.</td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">Rs.650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td>Rs.<span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">Rs.75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td>Rs.<span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total Rs.</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
here m add html and css codes too herer

Try doing split instead.
Ex:
function update_balance() {
var total= parseInt($("#total").html().split("Rs.")[1]);
var pval=parseInt($("#paid").val().split("Rs.")[1]);
var due = total-pval;
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
Same goes with update_price()

Edited, #Sampath M Jay, I just change some code you just post on your snippet to make it work. Something need to know:
Did you see the the code snippet needs jQuery? I think that may be the reason that your snippet is not working, anyway, I chose jQuery 1.11.0, which makes .live deprecated, so I change $(".delete").live(... to $(".delete").on(..., it just do the same thing.
The PHP part of your snippet is removed because stack snippet will not try to resolve it, so I believe whether to remove it or not is a minor issue.
Some of the html part also has the Rs. prefix, so remove them.
In js part, the update_total, update_balance, update_price and some part of the domready code which is
$("#addrow").click(function() {
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div...
bind();
...})
all of them have the relation with Rs., so removed them.
Left is 'should-be-ok' version without the bothering Rs., enjoy, and feel free to ask if there's any problem.
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = parseInt($(this).html());
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
$('#total').html(total);
update_balance();
}
function update_balance() {
var due = parseInt($("#total").html(), 10) - $("#paid").val();
due = roundNumber(due,2);
$('.due').html(due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val() * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due </td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>

You should remove "Rs" string being added at locations mentioned below. Then you can remove all replace("Rs.","")
function update_total() {
...
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
...
}
function update_balance() {
...
$('.due').html("Rs."+due);
...
}
function update_price() {
...
row.find('.price').html("Rs."+price);
...
}

shrinking tr width when it get position fix

I have a table of data which cols is determined automatically with its data.
but I need to fix first row as header title "for scrolling it remains fix at the top". when I give it position:fixed , header row`s width shrinks comparing to others!!!
first pic before setting position:fixed :
after setting position:fixed:
I can't change my structure code, because there are too many similar tables !!!! Only css or javascript can be used.
my code :
<table class="list_row_container">
<tr class="list_row_title">
<td width="30px" align="center"><input type="checkbox" id="keyCheckbox" onclick="updateCheckboxes(this.checked)"></td>
<td>
تاریخ ثبت
</td>
<td>
نوع کاربری
</td>
<td>
آدرس منطقه
</td>
<td>
زیر بنا
</td>
<td>
طبقه
</td>
<td>
اتاق
</td>
<td>
عمر
</td>
<td>
اجاره
</td>
<td>
ودیعه
</td>
<td> مشاهده</td>
</tr>
<tr class="list_row_even" id="row492314" >
<td align="center"><input type="checkbox" name="info[rowIds][492314]"></td>
<td class="list_field_container"><span class"list_field_normaltext">1394/02/29</span></td>
<td class="list_field_container"><span class"list_field_normaltext">موقعيت اداري </span></td>
<td class="list_field_container"><span class"list_field_normaltext">.بلوار فردوس غرب پروانه شمالي خ شقايق غربي پ 8</span></td>
<td class="list_field_container"><span class"list_field_normaltext">100</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">2</span></td>
<td class="list_field_container"><span class"list_field_normaltext">1</span></td>
<td class="list_field_container"><span class"list_field_normaltext"> -</span></td>
<td class="list_field_container"><span class"list_field_normaltext">660,000,000</span></td>
<td>
<a id="viewmbt-492314" style="cursor: pointer;" title="مشاهده مشاور"><img src="../images/search.png" alt="مشاهده" /></a>
<a id="viewmbt2-492314" style="cursor: pointer;" title="مشاهده مشتری"><img src="../images/groupIcon.png" alt="مشاهده" /></a>
</td>
</tr>
....
css style :
.list_container
{
width:100%; border:1px solid #395bc2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
min-height:100px;
display:table;
}
.list_header
{
width:98%; padding:1%; height:10px;
background: #c9e3fd; /* Old browsers */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color:#000099;
line-height:10px;
font-size: 18px;
}
.list_footer_container
{
background-color: #ffcc99;
font-size: 14px;
color: black;
padding: 10px;
}
.list_has_no_row
{
font-family: sans-serif;
font-size: 13px;
color: red;
}
.list_row_container img
{
width: 25px;
height: 25px;
}
.fixed-header{
position: fixed;
top:0px;
}
.list_row_container
{
border-top: 1px silver navy;
width: 100%;
text-align: center;
}
.list_row_title
{
background-color: #ffcc99;
font-size: 14px;
color: #000099;
}
.list_row_title td{padding: 10px;}
.list_row_even
{
background-color: #ffffff;
font-size: 14px;
color: black;
}
.list_row_even:hover
{
background-color: #ffcc99;
}
.list_row_odd
{
background-color: #c9e3fc;
font-size: 14px;
color: black;
}
.list_row_odd:hover{
background-color: #ffcc99;
}
.list_field_container
{
text-align: center;
padding: 0px;
margin: 0px;
}
.list_row_title {
background-color: #9c42a0;
color: #fff;
position: fixed;
}

this is the solution :
$(document).ready(function(){
/// get the td`s width automatically and set inline style width for all tds
$(".list_row_title td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
$(".list_row_even td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $(".list_row_container td").eq(index).width();
});
});
///if scroll make fix header tr
var $window = $(window);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 250) {
$(".list_row_title").addClass('fixed_table_header');
}
else {
$(".list_row_title").removeClass('fixed_table_header');
}
});
});
style :
.fixed_table_header
{
position: fixed;
top:0;
}