<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(1);
var y=x.insertCell(0);
var a=x.insertCell(1);
var b=x.insertCell(2);
var d= '<input type="button" value="Delete" onclick="deleteRow(this)">';
var e= '<input type="text" id="answer" />';
var f= '<input type="text" name=num; id="answer1" />';
y.innerHTML=e;
a.innerHTML=f;
b.innerHTML=d;
}

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

function check(browser,browser1)
{
document.getElementById("answer").value=browser;
document.getElementById("answer1").value=browser1;
}

function this_total( for_what )
{
var total = 0;
var i;

for (i = 1;i<10;i++){
var this_col = for_what.parentElement.parentElement.colIndex;
var num = this_col.getElementsById("answer1").value;

total += num;
}

for_what.getElementById("ans").value = total;
return;
}
</script>

</head>
<body>
<p>What's your favorite browser?</p>

<form>
<input type="radio" name="browser" onclick="insRow();check(this.value1,this.value2)" value1="Burger" value2="5.00">Burger<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Fried Rice" value2="4.00">Fried Rice<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Nescafe" value2="2.50">Nescafe<br />
<input type="radio" name="browser" onclick="insRow();check(this.value,this.value2)" value="Orange Juice" value2="3.60">Orange Juice<br />
<br />

</form>

<table id="myTable" border="1">
<tr>
<td>Title</td>
<td>Price</td>
<td>Cancel</td>
</tr>
<tr>
<td>Total: </td>
<td><input type="text" name="total" id="ans"></td>
<td><input type="button" onClick="this_total( this )" value="calculate"></td>
</tr>
</table>
<br />

</body>
</html>

This is a simple meal order selection.When i click on the radio button,it will insert a new row to a table and insert the value. And there also got delete button to delete each row.
After finish order,i need to total up the prices.But,when i click on the calculate button, it shown error on page.How can i get the values and total up all the values?

Please take a look and help me ,thanks.

Hi nicolechuah,

Try this out:

<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(1);
var y=x.insertCell(0);
var a=x.insertCell(1);
var b=x.insertCell(2);
var d= '<input type="button" value="Delete" onclick="deleteRow(this)">';
var e= '<input type="text" id="answer" />';
var f= '<input type="text" name=num; id="answer1" />';
y.innerHTML=e;
a.innerHTML=f;
b.innerHTML=d;
}

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

function check([B]el[/B])
{
document.getElementById("answer").value=[B]el.getAttribute('value1')[/B];
document.getElementById("answer1").value=[B]el.getAttribute('value2')[/B];
}

function this_total( for_what )
{
var total = 0;
var i;

for (i = 1;i<10;i++){
var this_col = for_what.parentElement.parentElement.colIndex;
var num = this_col.getElementsById("answer1")[i].value;

total += num;
}

for_what.getElementById("ans").value = total;
return;
}
</script>

</head>
<body>
<p>What's your favorite browser?</p>

<form>
<input type="radio" name="browser" onClick="insRow();check([B]this[/B])" value1="Burger" value2="5.00">Burger<br />
<input type="radio" name="browser" onClick="insRow();check([B]this[/B])" [B]value1[/B]="Fried Rice" value2="4.00">Fried Rice<br />
<input type="radio" name="browser" onClick="insRow();check([B]this[/B])" [B]value1[/B]="Nescafe" value2="2.50">Nescafe<br />
<input type="radio" name="browser" onClick="insRow();check([B]this[/B])" [B]value1[/B]="Orange Juice" value2="3.60">Orange Juice<br />
<br />

</form>

<table id="myTable" border="1">
<tr>
<td>Title</td>
<td>Price</td>
<td>Cancel</td>
</tr>
<tr>
<td>Total: </td>
<td><input type="text" name="total" id="ans"></td>
<td><input type="button" onClick="this_total( this )" value="calculate"></td>
</tr>
</table>
<br />

</body>
</html>

Hope this helps :) Tested in IE and Firefox

This question has already been answered. Start a new discussion instead.