Recargar colunna de una Tabla sin refrescar la pagina web.

Hola buenos dias respetados expertos !!
Hoy en dia me he levanto con otro problema esta ves en el desarrollo web.
Lo que yo quiero es pasar el valor calculado en mi funcion javascript a mi index.hmtl sin necesidad de recagar la pagina !!
En concreto muchos le dicen AJAX !! nose si mi concepto esta errado pero en realidad ajax trabaja asiendo peticiones del servidor yo simplente quiero hacer peticiones del cliente !!! en concreto. mi codigo es el siguiente.

Código

<html>
<head>
<title>Mercado Virtual</title>
<script type="text/javascript" src="codigo/programa.js"></script>
</head>
<body>
<div id="todo">
<header><h1>Mercado Virtual</h1></header>
<section>
<article>
<table border="2">
<tr>
 
	<td>
	<img src="frutas/naranja.jpg" onclick="calculando('naranja')"/>
	</td>
	<td>
	<img src="frutas/mango.jpg" onclick="calculando('mango')"/>
	</td>
	<td>
	<img src="frutas/papaya.jpg" onclick="calculando('papaya')"/>
	</td>
	<td>
	<img src="frutas/guineo.jpg" onclick="calculando('guineo')"/>
	</td>
	<td>
	<img src="frutas/limon.jpg" onclick="calculando('limon')"/>
	</td>
</tr>
<tr>
	<td>
	<img src="frutas/yuca.jpg" onclick="calculando('yuca')"/>
	</td>
	<td>
	<img src="frutas/ñame.jpg" onclick="calculando('name')"/>
	</td>
	<td>
	<img src="frutas/lechuga.jpg" onclick="calculando('lechuga')"/>
	</td>
	<td>
	<img src="frutas/zanahoria.jpg" onclick="calculando('zanahoria')"/>
	</td>
	<td>
	<img src="frutas/otoe.jpg" onclick="calculando('otoe')"/>
	</td>
</tr>
<table>
<table id="segunda" border="2">
<tr>
	<td>
	Producto
	</td>
	<td>
	Precio
	</td>
	<td>
	Cantidad
	</td>
</tr>
<tr>
	<td>
	Naranja
	</td>
	<td>
	0.35
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Mango
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Papaya
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Guineo
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Limon	
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Yuca	
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Ñame
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Lechuga	
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
<tr>
	<td>
	Zanahoria
	</td>
	<td>
	0.55
	</td>
	<td>
	<label id="zona"></label>
	</td>
</tr>
<tr>
	<td>
	otoe	
	</td>
	<td>
	0.55
	</td>
	<td>
 
	</td>
</tr>
</table>
</article>
</section>
</div>
</body>
</html>

Código

// productos de la primera colunna
var naranja=0;
var mango=0;
var limon=0;
var guineo=0;
var papaya=0;
// productos de la segunda colunna
var yuca=0;
var zanahoria=0;
var name=0;
var lechuga=0;
var otoe=0;
function calculando(n)
{
 
 
// comensamos a contar cuantas veces selecciona el producto el cliente.
if(n=='naranja')
naranja+=1;
 
if(n=='mango')
mango+=1;
 
if(n=='limon')
limon+=1;
 
if(n=='papaya')
papaya+=1;
 
if(n=='guineo')
guineo+=1;
 
if(n=='yuca')
yuca+=1;
 
if(n=='zanahoria')
zanahoria=1;
 
if(n=='lechuga')
lechuga+=1;
 
if(n=='otoe')
otoe+=1;
 
if(n=='name')
name+=1;
}
document.getElementById('zona').innerHTML=naranja;

ley mucho como siempre antes de postear para que no me digan que san google tiene la respuesta.

bueno y lo que encontre fue lo siguiente:

Código

document.getElementById('zona').innerHTML=naranja;

donde 'zona' es el ID del label que aparece en la segunda tabla de mi html y el metodo document.getElementById me permitira hacer lo que yo estoy buscando pero no es asi. si alguien tiene una idea que me pueda ayudar se lo boy agradecer de por vida.

:-[