Use js to realize automatic billing of shopping cart

After data is modified, the total price of each item is automatically calculated and the total price of all items is recalculated.

Because there is not much compatibility, it is only tested in Firefox.

Dom

 

<Div>
<Table id = "pricetable">
<Thead> <tr> <TD> item No. </TD> <TD> item name </TD> <TD> quantity </TD> <TD> price </TD> <TD> subtotal </TD> </tr> </thead>
<Tbody>
<Tr> <TD> jsp_123 </TD> <TD> Computer </TD> <input type = "text" value = "1"/> </TD> <TD> 1950 </TD> <TD> 1950 </TD> </tr>
<Tr> <TD> jsp_123 </TD> <TD> Computer </TD> <input type = "text" value = "1"/> </TD> <TD> 1950 </TD> <TD> 1950 </TD> </tr>
<Tr> <TD> jsp_123 </TD> <TD> Computer </TD> <input type = "text" value = "1"/> </TD> <TD> 1950 </TD> <TD> 1950 </TD> </tr>
<Tr> <TD> jsp_123 </TD> <TD> Computer </TD> <input type = "text" value = "1"/> </TD> <TD> 1950 </TD> <TD> 1950 </TD> </tr>
</Tbody>
<Tfoot>
<Tr> <TD> total: </TD> <TD colspan = "4"> 7800 </TD> </tr>
</Tfoot>
</Table>
</Div>
<Input type = "button" onclick = "getinall ()" value = "computing"/>

 

JS:

 

automatic billing of Shopping Cart

oeven.tar get. parentnode. parentnode. cells [4]. textcontent = count;
getinall (); // calculate the price of all items
});
})
function getinall ()
{< br> var table = document. getelementbyid ("pricetable");
var obody = table. tbodies [0];
var ofoot = table. tfoot;
var rows = obody. rows;
var pricecount = 0;
for (VAR I = 0; I {< br> var tempdata = rows [I]. cells [4]. textcontent;
pricecount = parsefloat (pricecount) + parsefloat (tempdata);

}
Alert (pricecount );
Ofoot. Rows [0]. cells [1]. textcontent = pricecount;

}
</SCRIPT>

<Style type = "text/CSS">
Table input [type = text] {width: 32px ;}
</Style>