Interrumpir funcion al llegar al maximo contador

[david_andress]

Hola a todos, soy nuevo en el manejo de este lenguaje, estoy haciendo un formulario con php y javascript.

Resulta que es un formulario dinamico donde se pueden agregar filas con un boton, el formulario tiene un contador, lo que quiero hacer es que cuando ya se halla agregado la fila numero 12, al pisar el boton adicionar fila aparezca un alert e interrumpa la funcion, y al mismo tiempo que el contador deje de sumar mas filas quedando en 12.

He probado con esto:

Código:

<script type="text/javascript">


function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","left");
//LIMITADO A 8 MÁXIMO
if(tabla.getElementsByTagName("tr").length>=12) {
    alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
	return false;
    }

var celda1 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","produc" + cont.value);
sel.setAttribute("ID","sel");
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Zapato';
opcioncur.value = 'Zapato';
sel.appendChild(opcioncur);



celda1.appendChild(sel);

var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","color" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Verde';
opcioncur.value = 'verde';
sel.appendChild(opcioncur);

opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "Rojo";
opcion1.value = "rojo";
sel.appendChild(opcion1); 

opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "Fucsia";
opcion2.value = "fucsia";
sel.appendChild(opcion2); 

opcion3 = document.createElement("OPTION");
opcion3.innerHTML = "Naranja";
opcion3.value = "naranja";
sel.appendChild(opcion3); 
celda2.appendChild(sel);

opcion4 = document.createElement("OPTION");
opcion4.innerHTML = "Blanco";
opcion4.value = "blanco";
sel.appendChild(opcion4); 
celda2.appendChild(sel);

opcion5 = document.createElement("OPTION");
opcion5.innerHTML = "Negro";
opcion5.value = "negro";
sel.appendChild(opcion5); 
celda2.appendChild(sel);

opcion6 = document.createElement("OPTION");
opcion6.innerHTML = "Amarillo";
opcion6.value = "amarillo";
sel.appendChild(opcion6); 
celda2.appendChild(sel);

var celda3 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","talla" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = '36';
opcioncur.value = '36';
sel.appendChild(opcioncur);

opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "37";
opcion1.value = "37";
sel.appendChild(opcion1); 

opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "38";
opcion2.value = "38";
sel.appendChild(opcion2); 

opcion3 = document.createElement("OPTION");
opcion3.innerHTML = "39";
opcion3.value = "39";
sel.appendChild(opcion3); 
celda3.appendChild(sel);

opcion4 = document.createElement("OPTION");
opcion4.innerHTML = "40";
opcion4.value = "40";
sel.appendChild(opcion4); 
celda3.appendChild(sel);

var celda4 = document.createElement("TD");
var valorb = document.createElement("INPUT");
celda4.align = ("center");
valorb.setAttribute("type","text");
valorb.setAttribute("border","none");
valorb.setAttribute("size","2");
valorb.setAttribute("maxlength","2");
valorb.setAttribute("name","canti" + cont.value);
valorb.className=("listo");
valorb.value = "1"; 
celda4.appendChild(valorb); 

var celda5 = document.createElement("TD");
var valorc = document.createElement("INPUT");
celda5.align = ("center");
valorc.setAttribute("type","text");
valorc.setAttribute("border","none");
valorc.setAttribute("size","5");
valorc.setAttribute("maxlength","2");
valorc.setAttribute("name","pre" + cont.value);
valorc.className=("listo");
valorc.value = "100 Bs"; 
celda5.appendChild(valorc);  

var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
celda6.align=("left") 
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);add(-1);add2(-100)}
boton.className=("boton")
celda6.appendChild(boton);


fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);

tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
function add(delta) {
      valor = eval(detalle.canti.value);
	 var tabla = document.getElementById("contenido").tBodies[0];
	if(tabla.getElementsByTagName("tr").length>12) return false;
    detalle.canti.value = eval(valor+delta); 

}
function add2(delta) {

   valor = eval(detalle.total.value);
   var tabla = document.getElementById("contenido").tBodies[0];
   if(tabla.getElementsByTagName("tr").length>12) return false;
   detalle.total.value = eval(valor+delta);  


}

</script>

Me va bien, el problema es el siguiente: cuando intento agregar la fila numero 13 me lanza el alert diciendo que ya no es posible y no agrega la fila, bien, pero el contador no se detiene y cuenta una fila mas, osea se situa en 13 :s . Espero que me puedan ayudar no hallo que hacer. Gracias