Tabela de Produto com preço total gerado a cada seleção

Noel Rocha — Sun, 07 Jun 2009 20:38:59 +0000

Esse foi um exercício bastante interessante que tive semana passada na faculdade durante a aula de Linguagem de Script do professor Carlos Sicsu. Nesse aplicativo que faremos será utilizado as tecnologias HTML, DOM e JAVASCRIPT.

O enunciado do exercício era o seguinte:
Construir uma página que contenha uma tabela chamada “produto-preco”. A cada selecao de um produto, o preco total de compra deve ser visualizado ao final da tabela. O preço poderá conter casas decimais.

Criando função calc_value_of_selected_products() em JavaScript que calculará o preço total dos produtos:

<script language="javascript">
function calc_price_of_selected_products() {
	// Obtendo formulário que contém os checkboxes com o valor dos produtos
	var products    = document.getElementById("product")
	// Preço será do tipo float por causa dos produtos que podem ter
	// centavos em seu valor
	var total_price = 0.0
 
	// Verificando quais checkboxes foram selecionados e somando seu valor;
  	for(i = 0; i < products.length; i++) {
		if (products[i].checked == true) {
			total_price = total_price + parseFloat(products[i].value)
		}
	}
 
	// Atualizando div que contém o preço total dos produtos
	document.getElementById("total").innerHTML = "Total: R$ " + total_price.toFixed(2)
}
script>

Para que o valor em centavos fique com 2 casas decimais é necessário usar a função toFixed(). Exemplo de seu uso:

parseFloat("10.2").toFixed(2) // 10.20
parseFloat("100").toFixed(2) // 100.00

O preço de cada produto ficará dentro do value em cada checkbox. O checkbox deverá chamar a função calc_price_of_selected_product() que criamos toda vez que for clicado nele.

<input type="checkbox" value="135.00" onclick="calc_price_of_selected_products()">

A Construindo a estrutura da tabela em HTML com alguns produtos e seus respectivos preços:

<form id="product">
	<table border="1">
	<tr>
		<td></td>
		<td>Produtos</td>
		<td>R$</td>
	</tr>
	<tr>
		<td><input type="checkbox" value="135.99" onclick="calc_price_of_selected_products()"></td>
		<td>Oculos</td>
		<td>135.99</td>
	</tr>
	<tr>
		<td><input type="checkbox" value="53.20" onclick="calc_price_of_selected_products()"></td>
		<td>Sunga</td>
		<td>53.20</td>
	</tr>
	<tr>
		<td><input type="checkbox" value="97.30" onclick="calc_price_of_selected_products()"></td>
		<td>Biquini</td>
		<td>97.30</td>
	</tr>
	</table>
</form>

A soma de todos os valores selecionados deverá ser exibido pela div total. Essa div deverá ser inserida após o formulário.

<div id="total">Total: R$ 0.00</div>

O funcionamento desse script pode ser visto no endereço abaixo:
http://www.noelrocha.com/blog/examples/tabela_produtos_preco.html

Noel Rocha » Tutoriais

Tabela de Produto com preço total gerado a cada seleção