este es un codigo de ejemplo para manejar arreglos en java script y DHTML,
si se preguntan como le hize para poder publicar el codigo en el blog, le digo que utilizo una herramienta llamada Blogcrowds la cual parsea ( analiza sintacticamente) el codigo y le agrega comandos para que pueda ser vizualizado correctamente o tambien esta otra herramienta llamada Simplecode.
la informacion la consegui de este blog
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript1.2">
function CrearCapas(idcapa, info) {//creacion de una funcion llamada crear capas
this.id = idcapa;
this.texto = info;
this.CrearCapa = function CrearCapa() {
try {
// Esta es la manera correcta y est�ndar -aunque m�s lenta y costosa-
// de generar contenido mediante el DOM:
// Objetos DOMElement necesarios:
var body = document.getElementsByTagName('body').item(0); // Tag <body> tambi�n se puede en forma de vector: //...agName('body')[0]; pero no es compatible con Opera.
var capa = document.createElement('div'); // Divisi�n al vuelo
var texto = document.createTextNode(this.texto); // Texto contenido en div al vuelo
// Establecer atributos de divisi�n:
capa.setAttribute('id', this.id);
capa.setAttribute('style', 'background-color:#f7f7f7; width:100px; border:#000000 2px solid;');
// Reconstruir el �rbol DOM:
capa.appendChild(texto);
body.appendChild(capa);
} catch(e) {
alert(e.name + " - " + e.message);
}
}
}
var Dom = { //creacion de una clase llamada Dom
get: function(el) { //creacion de una funcion llamada get
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {//creacion de una funcion llamada add
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
mostrar:function()
{
var nombre =new Array();
nombre[1] = document.formu.campo1.value;
nombre[2] = document.formu.campo2.value;
nombre[3] = document.formu.campo3.value;
nombre[4] = document.formu.campo4.value;
nombre[5] = document.formu.campo5.value;
nombre[6] = document.formu.campo6.value;
nombre[7] = document.formu.campo7.value;
nombre[8] = document.formu.campo8.value;
nombre[9] = document.formu.campo9.value;
nombre[10] = document.formu.campo10.value;
//document.write(nombre);
//alert(nombre);
for (i = 0; i < 10; i++) {
var capa = new CrearCapas('idCapanueva', nombre[i]);
capa.CrearCapa();
}
}
};
var Event = { //creacion de una clase llamada Event
add: function() { //creacion de una funcion llamada add
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
Event.add(window, 'load',
function() {// elemento, evento, accion
/* La variable i la concateno con el nombre del campo para generar nombres de campo diferente, se generan asi: campo1, campo2, campo3, campo4... campoN */
var i = 1;
Event.add('add-element', 'click', function() { // id, evento, accion
// Creacion de los elementos tr, td e input
var el = document.createElement('tr'); //creacionde un renglon
var elCont = document.createElement('td'); // creacion de una celda
var elInput = document.createElement('input'); //creacion de un inputtext
// Creacion de los textos (labels) de cada input
var ecLbl = document.createElement('label'); //creacion de una etiqueta
var ecText = document.createTextNode('Numero '+ i);// creacion de String pra la etiqueta
ecLbl.appendChild(ecText);
// Aplico los tipos y nombres de los input
elInput.type = 'text';
elInput.name = 'campo'+ i;
elInput.id='campo'+ i++;
// Inserto cada input y cada texto dentro del td
elCont.appendChild(ecLbl);
elCont.appendChild(elInput);
// inserto cada td (con sus hijos creados en el anterior bloque) dentro de el tr
el.appendChild(elCont);
// inserto los tr en el DOM
Dom.add(el, 'content');
});
Event.add('mostrar', 'click', function() { // id, evento, accion
Dom.mostrar();
});
});
</script>
</head>
<body>
<div id="doc">
<input type="button" id="add-element" value="agregar campo" />
<input type="button" id="mostrar" />
<form method="post" action="#" name ="formu">
<table>
<tbody id="content">
</tbody>
</table>
</form>
</div>
</body>
</html>
espero que esto les sea de utilidad
No hay comentarios:
Publicar un comentario
escribe tu opinion: