<Table border = 1 align = "center" width = "80%">
<Tr>
<Th>
No.
</Th>
<Th> unit price </th>
<Th> quantity </th>
<Th> amount </th>
<Th> operation </th>
</Tr>
<Tbody id = "t">
<Tr align = "center">
<Td> 1 </td>
<Td> 10 </td>
<Td>
<Input onkeyup = "js (this)">
</Td>
<Td>
0
</Td>
<Td>
<Input type = button value = "+" onclick = "addRow ()">
<Input type = button value = "-" onclick = "delRow (this)">
</Td>
</Tr>
</Tbody>
</Table>
<Div style = "float: right">
Total amount: <span div = "sum"> 0 </span>
</Div>
<Script>
// Add a row
Function addRow ()
{
Var t = document. getElementById ("t ");
// Obtain the first row of the table and clone it.
Var tr = t. rows [0]. cloneNode (true );
T. appendChild (tr );
// Clear quantity
Tr. cells [2]. childNodes [0]. value = "";
Bh ();
}
// Delete a row
Function delRow (btn)
{
Var tr = btn. parentNode. parentNode;
Tr. parentNode. removeChild (tr );
Bh ();
}
// Rename
Function bh ()
{
Var t = document. getElementById ("t ");
For (var I = 0; I <t. rows. length; I ++)
{
T. rows [I]. cells [0]. innerHTML = I + 1;
}
}
// Calculate the amount
Function js (txtNum)
{
Var num = txtNum. value; // quantity
If (isNaN (num ))
{
Alert ("only numbers ");
TxtNum. value = num. substring (0, num. length-1 );
Return;
}
Var tr = txtNum. parentNode. parentNode;
Var price = tr. cells [1]. innerHTML; // unit price
Var money = price * num;
Tr. cells [3]. innerHTML = money;
}
</Script>