I am currently working on a college project on the GPA calculator whereby the default subjects, subjects code and credits are filled in the table by default and are editable. The students only need to fill in their expected marks for each subjects and then just simply click on a button that has been provided to view the grades and the pointers for each subject. The following code works just okay since I have not finished a large part of it yet, but there is certainly a problem while running the code. The problem is that the button for showing the grades and pointers for each subject only works on the first row of the table. Which means that it updates the grade and pointer of a subject only on the first row on the table. I have provided you with both the html file and js file to run the program and make you understand more on what I am trying to say.
JS Fiddle example: https://jsfiddle.net/onyhL6mb/
.html file:
<html>
<title> GPA Calculator </title>
<head>
<script src="test_asg3.js">
</script>
</head>
<body>
<form name="gpaCalc">
<table id="myTable" border="1"; width: "100%">
<tr>
<th>Code
<th>Subject
<th>Credit
<th>Expected Mark
<th>Grades
<th>GPA
<th>
</tr>
<tr>
<td><input type="text" name="code" value="SCJ524"></td>
<td><input type="text" name="subject" value="Object-Oriented Programming"></td>
<td><input type="text" name="credit" value="4"></td>
<td><input type="text" id="marks" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCJ011"></td>
<td><input type="text" name="subject" value="Software Engineering"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks1" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCR234"></td>
<td><input type="text" name="subject" value="Operating System"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks2" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCV122"></td>
<td><input type="text" name="subject" value="Web Programming"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks3" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="ENG222"></td>
<td><input type="text" name="subject" value="Advanced Academic English Skills"></td>
<td><input type="text" name="credit" value="2"></td>
<td><input type="text" id="marks4" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="BIO683"></td>
<td><input type="text" name="subject" value="Structure and Functions of Proteins"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks5" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
</table>
</form>
<br><input type="button" value="Add Subject" onclick="addRow('myTable')" />
<!--<input type="button" value="Calculate GPA" onclick="gpacalc()" /> -->
<!---<br><input type="submit" value="Calculate GPA" onclick="xxxxxx('yyyy')" />--->
</body>
</html>
.js file
function addRow(myTable)
{
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("");
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("");
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("");
cell7.appendChild(element7);
}
var x;
function getMarks(id)
{
x = document.getElementById(id).value;
}
function displayGrades()
{
var grade;
var gpaPoint;
if(x >= 90 && x<=100)
{
grade = "A+";
gpaPoint = 4.00;
}
else if(x >=80 && x< 90)
{
grade = "A";
gpaPoint = 4.00;
}
else if(x >=75 && x< 80)
{
grade = "A-";
gpaPoint = 3.67;
}
else if(x >=70 && x< 75)
{
grade = "B+";
gpaPoint = 3.33;
}
else if(x >=65 && x< 70)
{
grade = "B";
gpaPoint = 3.00;
}
else if(x >=60 && x< 65)
{
grade = "B-";
gpaPoint = 2.67;
}
else if(x >=55 && x< 60)
{
grade = "C+";
gpaPoint = 2.33;
}
else if(x >=50 && x< 55)
{
grade = "C";
gpaPoint = 2.00;
}
else if(x >=45 && x< 50)
{
grade = "C-";
gpaPoint = 1.67;
}
else if(x >=40 && x< 45)
{
grade = "D";
gpaPoint = 1.00;
}
else if(x < 40)
{
grade = "F";
gpaPoint = 0.00;
}
document.getElementById("grade").innerHTML = grade;
document.getElementById("points").innerHTML = gpaPoint;
}
I have posted the same question on my other account on here and updated the code using the answers suggested by the other users. However, I am not allowed to post another question on that account since the question that I have posted received "bad reviews" from the other users and hence reached my limit to post another question. Hopefully someone can come up with an idea this time to help with this project.
P/S: it works perfectly fine when i use notepad++ but it doesn't seem to work with the js fiddle example.
You cannot have HTMLElements having the same ID
Your id="grade" and id="point" is wrong.
You should generate it with and unique ID like the row count or the ID of the subject like id="grade_0" or id="grade_SCV122" and pass this variable to your function for exemple.
Edit :
You can do it this way :
Change your button onclick to this
displayGrades(this.parentElement.parentElement)
And the begining of your script like this
function displayGrades( line )
{
var grade;
var gpaPoint;
if( line && line.children && line.children.length > 0 ){
//Pure javascript
grade = line.children[0].children[0].value;
gpaPoint = line.children[3].children[0].value;
//jQuery
grade = $(line).find("input[name=code]").val();
gpaPoint = $(line).find("input[name=marks]").val();//And add the name marks to your input marks
}
UPDATE
//replace the 2 getElementsById lines by that
line.children[4].innerHTML = grade;
line.children[5].innerHTML = gpaPoint;
Related
The user fills out the form below based upon how many of the items they sold.
The calculator then calculates how much the salesperson sold into the blanks below + how much they earned + 200 dollars additional + 9% commission on total sales... and then the form outputs the results.
round the outputted results to 2 decimal places.
check for valid numeric input
make sure the number of items sold is < 0, as nobody sells negative number of items.
right-justify all amounts.
I have written out what I think the functions should be about, without proper syntax. I am super green with javascript and pretty much am only good at HTML sadly. I need help making what I have correspond to the form fields properly... this is all very overwhelming. Any Explanation is helpful.
<h1>Sales Commission Calculator</h1>
<hr>
<section>
<form name="salesperson_total">
Salesperson: <input type="text" title="Please make sure that the salesperson's name is spelled correctly" name="sp" size="20">
<br>
<br>
<h3>Input the number of items sold for each item number:</h3>
Item 1: <input class="t" type="text" name="num_item1" size="8" value="num_item1"><br>
Item 2: <input class="t" type="text" name="num_item2" size="8" value="num_item2"><br>
Item 3: <input class="t" type="text" name="num_item3" size="8" value="num_item3"><br>
Item 4: <input class="t" type="text" name="num_item4" size="8" value="num_item4"><br><br>
<input type="button" value="Submit">
<input type="reset" value="Reset"><br><br>
<table>
<tr>
<th>Item #</th>
<th>Price</th>
<th>Number Sold</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>$239.99</td>
<td><input type="text" class="t" name="int_item1"></td>
<td><input type="text" class="t" name="total_item1"></td>
</tr>
<tr>
<td>2</td>
<td>$129.75</td>
<td><input type="text" class="t" name="int_item2"></td>
<td><input type="text" class="t" name="total_item2"></td>
</tr>
<tr>
<td>3</td>
<td>$99.95</td>
<td><input type="text" class="t" name="int_item3"></td>
<td><input type="text" class="t" name="total_item3"></td>
</tr>
<tr>
<td>4</td>
<td>$350.89</td>
<td><input type="text" class="t" name="int_item4"></td>
<td><input type="text" class="t" name="total_item4"></td>
</tr>
<tr>
<td colspan="3">Total Amount Sold:</td>
<td><input type="text" class="t" name="final_total"></td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" class="t" name="salary"></td>
</tr>
</table>
</form>
</section>
<br>
<script>
var num_item1 = "";
var num_item2 = "";
var num_item3 = "";
var num_item4 = "";
var price1 = 239.99;
var price2 = 129.75;
var price3 = 99.95;
var price4 = 350.89;
var int_item1 = "";
var int_item2 = "";
var int_item3 = "";
var int_item4 = "";
var total_item1;
var total_item2;
var total_item3;
var total_item4;
var comm;
function numberSold() {
num_item1
num_item2
num_item3
num_item4
}
function totalSold() {
total_item1 = num_item1 * price1;
total_item2 = num_item2 * price2;
total_item3 = num_item3 * price3;
total_item4 = num_item4 * price4;
}
function amountSold() {
total_item1 + total_item2 + total_item3 + total_item4;
}
function getComm() {
comm = Math.floor(9/amountSold*100);
}
function weeklyEarned() {
amountSold + comm + 200
document.write();
}
</script>
</section>
</body>
</html>
//see above for expected results in description.
I did this quickly and this should suffice to act as a guide:
<h1>Sales Commission Calculator</h1>
<hr>
<section>
<form name="salesperson_total">
Salesperson: <input type="text" title="Please make sure that the salesperson's name is spelled correctly" name="sp" size="20">
<br>
<br>
<h3>Input the number of items sold for each item number:</h3>
Item 1: <input class="t" type="text" name="num_item1" id="item1" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
Item 2: <input class="t" type="text" name="num_item2" id="item2" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
Item 3: <input class="t" type="text" name="num_item3" id="item3" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
Item 4: <input class="t" type="text" name="num_item4" id="item4" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
<span id="msg" style="color:red;"></span><br><br> <!--This element is used to display an error message if any item entered is less than zero-->
<input type="button" value="Submit" id="submitBtn" onclick="calculate()">
<input type="reset" value="Reset" onclick="reset()"><br><br>
<table>
<tr>
<th>Item #</th>
<th>Price</th>
<th>Number Sold</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>$239.99</td>
<td><input type="text" class="t" name="int_item1" id="int_item1" style="text-align:right;"></td>
<td><input type="text" class="t" name="total_item1" id="total_item1" style="text-align:right;"></td>
</tr>
<tr>
<td>2</td>
<td>$129.75</td>
<td><input type="text" class="t" name="int_item2" id="int_item2" style="text-align:right;"></td>
<td><input type="text" class="t" name="total_item2" id="total_item2" style="text-align:right;"></td>
</tr>
<tr>
<td>3</td>
<td>$99.95</td>
<td><input type="text" class="t" name="int_item3" id="int_item3" style="text-align:right;"></td>
<td><input type="text" class="t" name="total_item3" id="total_item3" style="text-align:right;"></td>
</tr>
<tr>
<td>4</td>
<td>$350.89</td>
<td><input type="text" class="t" name="int_item4" id="int_item4" style="text-align:right;"></td>
<td><input type="text" class="t" name="total_item4" id="total_item4" style="text-align:right;"></td>
</tr>
<tr>
<td colspan="3">Total Amount Sold:</td>
<td><input type="text" class="t" name="final_total" id="final_total" style="text-align:right;"></td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" class="t" name="salary" id="salary" style="text-align:right;"></td>
</tr>
</table>
</form>
</section>
<br>
<!--Javascript-->
<script>
//Declare and initialize all variables
var num_item1 = "";
var num_item2 = "";
var num_item3 = "";
var num_item4 = "";
var price1 = 239.99;
var price2 = 129.75;
var price3 = 99.95;
var price4 = 350.89;
var int_item1 = "";
var int_item2 = "";
var int_item3 = "";
var int_item4 = "";
var total_item1 = 0;
var total_item2 = 0;
var total_item3 = 0;
var total_item4 = 0;
var comm = 0;
var earnings = 0;
//As the user enters a value in the item fields check if the number of items entered by the user is less than zero
function checkNumItems(){
if(document.getElementById('item1').value < 0 || document.getElementById('item2').value < 0 || document.getElementById('item3').value < 0 || document.getElementById('item4').value < 0){
//Display an error message if either one of the items is less than zero
document.getElementById('msg').innerHTML = "Error: Values cannot be less than 0";
//Disable the submit button if either one of the items is less than zero
document.getElementById("submitBtn").disabled = true;
}else{
//Remove (or do not display) an error message if all items are more than 0
document.getElementById('msg').innerHTML = "";
//Enable submit button if all items are greater than zero
document.getElementById("submitBtn").disabled = false;
} }
//Function used to calculate and fill in all fields when the user press Submit
function calculate(){
//Get the values the user entered
num_item1 = document.getElementById('item1').value;
num_item2 = document.getElementById('item2').value;
num_item3 = document.getElementById('item3').value;
num_item4 = document.getElementById('item4').value;
//Set the values into the fields of the column 'Number Sold'
document.getElementById('int_item1').value = num_item1;
document.getElementById('int_item2').value = num_item2;
document.getElementById('int_item3').value = num_item3;
document.getElementById('int_item4').value = num_item4;
//Calculate the total for each item
total_item1 = num_item1 * price1;
total_item2 = num_item2 * price2;
total_item3 = num_item3 * price3;
total_item4 = num_item4 * price4;
//Set the total for each fields of the 'Total' column
document.getElementById('total_item1').value = total_item1;
document.getElementById('total_item2').value = total_item2;
document.getElementById('total_item3').value = total_item3;
document.getElementById('total_item4').value = total_item4;
//Calculate the 'Total Amount Sold' field
amountSold = total_item1 + total_item2 + total_item3 + total_item4;
//Set (fill in) the 'Total Amount Sold' field
document.getElementById('final_total').value = amountSold;
//Calculate the commission
comm = Math.floor(9/amountSold*100);
//Caclulate the earnings
earnings = amountSold + comm + 200;
//Set the 'Total Weekly Earnings' field
document.getElementById('salary').value = earnings;
}
//Function used to Reset the fields the salesperson enters when they press Reset
function reset(){
document.getElementById('item1').value = 0;
document.getElementById('item2').value = 0;
document.getElementById('item3').value = 0;
document.getElementById('item4').value = 0;
}
</script>
I have a dynamic table which contains multiple textboxes. I need textbox B to have a maximum of 6 number input and will prompt an error if the input value is less than and not equal to 6. Please help Im new to javascript
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="A" size="20" maxlength="6" required/>';
row.insertCell(1).innerHTML = '<input type="text" name="B" size="20" required/>';
row.insertCell(2).innerHTML = '<input type="text" name="C" size="20" required/>';
}
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
<table id="bod">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</table>
Create input manually and addEventListener to it. Something like this.
function addRow() {
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = '<input type="text" name="A" size="20" maxlength="6" required/>';
var colB = row.insertCell(1);
var inp = document.createElement('input');
inp.type = 'text';
inp.name = 'B';
inp.size = 20;
inp.required = true;
colB.appendChild(inp);
inp.addEventListener('change', function() {
if (this.value.length !== 6) {
alert('wrong value');
this.focus();
}
});
row.insertCell(2).innerHTML = '<input type="text" name="C" size="20" required/>';
}
<input type="button" id="add" value="Add" onclick="addRow()">
<table id="bod">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</table>
The output shown on image
Hi am not much expertise in javascript, In my code I have Add-Items & Delete-Items button which is working fine.First row works fine for total calculation function but rest of rows not working because of that Am not able to assign different names and ids for created row. How I can reuse javascript. Also please let me know how to receive data on submit using POST method or this code and how to find total amount of all rows I inserted at the bottom of table.
Thanks in Advance
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<script type="text/javascript" src="add_rows.js"></script>
<script>
function func()
{
var w = document.getElementById("qty").value;
var x = document.getElementById("price").value;
var z = document.getElementById("total");
z.value = Number(w)*Number(x);
}
</script>
</head>
<body>
<fieldset class="row2">
<legend>Catering Order Details</legend>
<p>
<input type="button" value="Add Items" onClick="addRow('dataTable')" />
<input type="button" value="Remove Items" onClick="deleteRow('dataTable')" />
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" /></td>
<td>
<label>Item</label>
<select size="1" name="Item[]" required="required" >
<?php
echo "<option value=''>---Choose Item---</option>";
$q=mysqli_query($dbConnect1,"SELECT DISTINCT ITEM as Item, ITEM_ID FROM `manage_item`");
while($r=mysqli_fetch_assoc($q))
{
$i=$r['ITEM_ID'];
$n=$r['Item'];
echo "<option value='$i'> $n</option>";
}
?>
</select>
</td>
<td>
<label>Quantity</label>
<input type="text" required="required" name="Qty[]" id="qty" value="">
</td>
<td>
<label>Price/Quantity</label>
<input type="text" required="required" name="Price[]" id="price" value="" onChange="func()">
</td>
<td>
<label>Total</label>
<input type="text" required="required" name="Total[]" id="total" value="">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</body>
</html>
Here's my script
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 100){
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum items is 100.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot Remove all the Items.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
Instead to use IDs you may change them to class names like in:
<input type="text" required="required" name="Qty[]" class="qty" value="" oninput="func(this)">
Because you are using inline events you can:
use input event because the DOM input event is fired synchronously when the value of an <input>, <select>, or <textarea> element is changed.
this as parameter to the inline function: it will be the current element
Hence, change your func to:
function func(ele) {
var parentRow = ele.parentNode.parentNode;
var w = parentRow.querySelector('input.qty').value;
var x = parentRow.querySelector('input.price').value;
var z = parentRow.querySelector('input.total');
z.value = Number(w)*Number(x);
}
The this parameter now is the ele, current element. You can now get the parent row and using the classes and querySelector you can find all elements.
The snippet:
function updateGrandTotal() {
var gt = document.querySelector('input.grantotal');
gt.value = 0;
document.querySelectorAll('input.total').forEach(function(ele, idx) {
gt.value = +gt.value + +ele.value;
});
}
function func(ele) {
var parentRow = ele.parentNode.parentNode;
var w = parentRow.querySelector('input.qty').value;
var x = parentRow.querySelector('input.price').value;
var z = parentRow.querySelector('input.total');
z.value = Number(w)*Number(x);
updateGrandTotal();
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length -1;
if(rowCount < 100){
var row = table.insertRow(rowCount + 1);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
}
}else{
alert("Maximum items is 100.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot Remove all the Items.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
updateGrandTotal();
}
<fieldset class="row2">
<legend>Catering Order Details</legend>
<p>
<input type="button" value="Add Items" onClick="addRow('dataTable')" />
<input type="button" value="Remove Items" onClick="deleteRow('dataTable')" />
</p>
<table id="dataTable" class="form" border="1">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<label>Grand Total</label>
<input type="text" required="required" name="Total[]" class="grantotal" value=""></td>
</tr>
</thead>
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" /></td>
<td>
<label>Item</label>
<select size="1" name="Item[]" required="required" >
<option value=''>---Choose Item---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<label>Quantity</label>
<input type="text" required="required" name="Qty[]" class="qty" value="" oninput="func(this)">
</td>
<td>
<label>Price/Quantity</label>
<input type="text" required="required" name="Price[]" class="price" value="" oninput="func(this)">
</td>
<td>
<label>Total</label>
<input type="text" required="required" name="Total[]" class="total" value="">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
I want to add new rows having 3 input field and check if multiplication of 2 field equals to third input field. But my problem is if I check the multiplication of first 2 input field, the result will effect second row and third row etc because they all have same id and user can add many rows.
How to check with different id or without effected. my some code are as follows:
function addRow(elem,id) {
var trElement = elem.parentElement.parentElement;
var tr = document.getElementsByTagName('tr');
tr = Array.prototype.slice.call(tr);
var a = tr.indexOf(trElement);
var b = a+1;
var table = document.getElementById('dataTable');
var j, m;
var rowCount = table.rows.length;
var row = table.insertRow(a);
var colCount = table.rows[b].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[b].cells[i].innerHTML;
}
}
<table width="100%" id="dataTable">
<tr>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
</tr>
<tr>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
</tr>
</table>
<input type="button" id="agri" value="Add Row" onclick="addRow(this,id)" />
Thanks in Advance
I hope it Help you ;
cheak result as :
function addRow(elem,id) {
var trElement = elem.parentElement.parentElement;
var tr = document.getElementsByTagName('tr');
tr = Array.prototype.slice.call(tr);
var a = tr.indexOf(trElement);
var b = a+1;
var table = document.getElementById('dataTable');
var j, m;
var rowCount = table.rows.length;
var row = table.insertRow(a);
var colCount = table.rows[b].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[b].cells[i].innerHTML;
}
}
function cheakMulti() {
r = document.getElementsByTagName('tr');
for (i = 0; i < r.length; i++)
{
if(r[i].children[2].children[0].value==r[i].children[1].children[0].value*r[i].children[0].children[0].value)
{
r[i].children[2].children[0].style.backgroundColor="green";
}
else
{
r[i].children[2].children[0].style.backgroundColor="red";
}
}
}
<table width="100%" id="dataTable">
<tr>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
</tr>
<tr>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
<td><input name="" type="text" /></td>
</tr>
</table>
<input type="button" id="agri" value="Add Row" onclick="addRow(this,id)" />
<input type="button" id="agri" value="Cheak" onclick="cheakMulti(this,id)" />
I have list of array elements like {5000,10000,25000,50000,100000}
i want those elements should assign to the text field with buttons on click.Like as show in the image
the units value should change according to the click events.
Here is the sample code
<html>
<head>
<style>
td { width:33%; }
</style>
<script>
var counter = 0;
function upDate(){
counter++;
if (counter > 7){
counter = 0;
}
var description = new Array(7)
description[0] = "5000";
description[1] = "10000";
description[2] = "25000";
description[3] = "50000";
description[4] = "100000";
description[5] = "250000";
description[6] = "500000";
description[7] = "Unlimited";
document.myForm.units.value = description[counter];
}
var lenght = 0;
function upDateLength(){
lenght++;
if (lenght > 2){
lenght = 0;
}
var description = new Array(3)
description[0] = "30sec";
description[1] = "60sec";
description[2] = "unlimited";
document.myForm.length.value = description[lenght];
}
var utype = 0;
function upDateType(){
utype++;
if (utype > 2){
utype = 0;
}
var description = new Array(3)
description[0] = "Feature";
description[1] = "Background";
description[2] = "Theme";
document.myForm.utype.value = description[utype];
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
<table width="75%" align="center" border="1">
<tr>
<td colspan="3" align="center"><h2>License Requests</h2></td>
</tr>
<tr>
<td><input type="radio" name="type" value="vocal"><span>Vocal</span></td>
<td><input type="radio" name="type" value="inst"><span>Instrumental</span></td>
<td> </td>
</tr>
<tr>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDate()"> Units</td></tr>
<tr><td><input type="text" name="units" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateLength()"> Length</td></tr>
<tr><td><input type="text" name="length" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateType()"> User Type</td></tr>
<tr><td><input type="text" name="utype" value="" ></td></tr></table>
</td>
</tr>
</table>
</form>
</body>
<html>