Problem:- Genrate dynamic textboxes for adding dynamic numbers. If user entered three in textbox than genrate three textboxes and add values entered in that textboxes by user. Below is the code in javascript for solving problem.
This calculator can add two-digit numbers and display the result. First enter how many numbers you want to enter and press Change button. Then enter your numbers in the table and press Recalculate. Any blank or non-numeric input would be skipped while adding the numbers
<!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>
<title>Javascript Calculator</title>
</head>
<body>
This calculator can add two-digit numbers and display the result. First enter how
many numbers you want to enter and press Change button. Then enter your numbers
in the table and press Recalculate. Any blank or non-numeric input would be skipped
while adding the numbers.<br />
<br />
<br />
Number of Rows:
<input type="text" id="NumberToAdd" value="" style="width: 30px" maxlength="2"> <input
type="button" value='Change' onclick="javascript:NumberToAdd(this) " />
<br />
<br />
<table cellspacing="0" cellpadding="4" id="tblID">
</table>
<input type="button" value='Recalculate Sum' onclick="javascript:AddTotal()" />
</body>
</html>
<script language="javascript" type="text/javascript">
//function Get the input from user for total number to be add
function NumberToAdd() {
//Clear existing HTML
DeleteAllRows();
//Get total numbers of rows dynimcally add
var totalNumber = document.getElementById("NumberToAdd").value;
if (totalNumber != null) {
//Genrate rows as per input given by user i.e 'totalNumber'
for (var i = 1; i <= totalNumber; i++) {
addRow("tblID", i);
}
}
return false;
}
//Remove all existing rows
function DeleteAllRows() {
var table = document.getElementById('tblID');
var rows = table.rows;
while (rows.length)
table.deleteRow(rows.length - 1);
}
//function adding row at runtime
function addRow(tableID, i) {
//Get table object
var table = document.getElementById(tableID);
//Find total numbers of rows
var rowCount = table.rows.length;
//Add row count to table
var row = table.insertRow(rowCount);
//Add Label to first cell of row
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "label";
element1.innerHTML = "Number" + i;
cell1.appendChild(element1);
//Add Input control to second cell of row
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.id = "number" + i;
element2.type = "text";
element2.maxlength = "2";
cell2.appendChild(element2);
}
//function Adding the number as per rows data added at runtime
function AddTotal() {
var total = 0;
var totalNumber = document.getElementById("NumberToAdd").value;
for (var i = 1; i <= totalNumber; i++) {
if (document.getElementById("number" + i).value != "" && (parseInt(document.getElementById("number" + i).value)).toString() != "NaN")
total = parseInt(total) + parseInt(document.getElementById("number" + i).value);
}
//Check weather Result element exist
if (document.getElementById("result") == null) {
//Adding row to show add total result
var table = document.getElementById("tblID");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = "result";
//Add Label to first cell of row
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "label";
element1.innerHTML = "TOTAL";
cell1.appendChild(element1);
//Add Input control to second cell of row
var cell2 = row.insertCell(1);
var element2 = document.createElement("label");
element2.id = "resultCell";
element2.type = "label";
element2.innerHTML = total;
cell2.appendChild(element2);
}
//if result element exist then override the result
else
document.getElementById("resultCell").innerHTML = total;
}
</script>
This calculator can add two-digit numbers and display the result. First enter how many numbers you want to enter and press Change button. Then enter your numbers in the table and press Recalculate. Any blank or non-numeric input would be skipped while adding the numbers
<!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>
<title>Javascript Calculator</title>
</head>
<body>
This calculator can add two-digit numbers and display the result. First enter how
many numbers you want to enter and press Change button. Then enter your numbers
in the table and press Recalculate. Any blank or non-numeric input would be skipped
while adding the numbers.<br />
<br />
<br />
Number of Rows:
<input type="text" id="NumberToAdd" value="" style="width: 30px" maxlength="2"> <input
type="button" value='Change' onclick="javascript:NumberToAdd(this) " />
<br />
<br />
<table cellspacing="0" cellpadding="4" id="tblID">
</table>
<input type="button" value='Recalculate Sum' onclick="javascript:AddTotal()" />
</body>
</html>
<script language="javascript" type="text/javascript">
//function Get the input from user for total number to be add
function NumberToAdd() {
//Clear existing HTML
DeleteAllRows();
//Get total numbers of rows dynimcally add
var totalNumber = document.getElementById("NumberToAdd").value;
if (totalNumber != null) {
//Genrate rows as per input given by user i.e 'totalNumber'
for (var i = 1; i <= totalNumber; i++) {
addRow("tblID", i);
}
}
return false;
}
//Remove all existing rows
function DeleteAllRows() {
var table = document.getElementById('tblID');
var rows = table.rows;
while (rows.length)
table.deleteRow(rows.length - 1);
}
//function adding row at runtime
function addRow(tableID, i) {
//Get table object
var table = document.getElementById(tableID);
//Find total numbers of rows
var rowCount = table.rows.length;
//Add row count to table
var row = table.insertRow(rowCount);
//Add Label to first cell of row
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "label";
element1.innerHTML = "Number" + i;
cell1.appendChild(element1);
//Add Input control to second cell of row
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.id = "number" + i;
element2.type = "text";
element2.maxlength = "2";
cell2.appendChild(element2);
}
//function Adding the number as per rows data added at runtime
function AddTotal() {
var total = 0;
var totalNumber = document.getElementById("NumberToAdd").value;
for (var i = 1; i <= totalNumber; i++) {
if (document.getElementById("number" + i).value != "" && (parseInt(document.getElementById("number" + i).value)).toString() != "NaN")
total = parseInt(total) + parseInt(document.getElementById("number" + i).value);
}
//Check weather Result element exist
if (document.getElementById("result") == null) {
//Adding row to show add total result
var table = document.getElementById("tblID");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = "result";
//Add Label to first cell of row
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "label";
element1.innerHTML = "TOTAL";
cell1.appendChild(element1);
//Add Input control to second cell of row
var cell2 = row.insertCell(1);
var element2 = document.createElement("label");
element2.id = "resultCell";
element2.type = "label";
element2.innerHTML = total;
cell2.appendChild(element2);
}
//if result element exist then override the result
else
document.getElementById("resultCell").innerHTML = total;
}
</script>
No comments:
Post a Comment