Tablas Dinamicas en JavaScript

cancer_15_4_9 · #1 (**permalink**) 14/11/2011, 09:08

Hola... espero me puedan ayudar. Necesito hacer una tabla dinamicas es decir que me agrege n columnas y n filas.

He encontrado ejemplos pero solo agregar filas alguien tendra idea de como hacer esto de forma que tambien agrega columnas. Quisiera ponerle un boton de agregar columnas y filas.... que se encuentre fuera de tabla es decir como encabezado... y vaya creando la tabla dinamica... porque dentro de la celda voy a meter datos ...trabajo con SQL Server y PHP.

No se si me explique cualquier cosa estare por aqui..!!!!

augusto_jaramil · #2 (**permalink**) 14/11/2011, 09:44

Ta lvez esto te pueda ayudar,

Código PHP:

  function creaTd(columnas,ident,tablaActual) {

 
  var repor = document.getElementById(tablaActual);

  repor.innerHTML = "";

 
  idtbl = "columnas_"+ident;

  tbl = document.createElement("table");

    tbl.setAttribute("style", "border-width:1px;border-style:solid outset;border-color:#FFFFFF;border-collapse:separate;background-color:#87CAFA");

    tbl.setAttribute("id", idtbl);

    tbl.setAttribute("width", "100%");

 
  tbd = document.createElement("tbody");

 
  tr = document.createElement("tr");

  colum = document.getElementById(columnas).value;

  for(i=1;i<=columnas;i++) {

     TDt = document.createElement("td");

        TDt.setAttribute("class", "clasetd");

        TDt.setAttribute("align", "center");

 
     idCol=ident+i;

     input = document.createElement("input");

        input.setAttribute("type", "text");

        input.setAttribute("id", idCol);

        input.setAttribute("name", idCol);

        input.setAttribute("value", "Defina Titulo "+Texto+" "+i);

        input.setAttribute("class", "claseinput");

        estilo = "text-align:center; color:blue; width:190px";

        input.setAttribute("style", estilo);

     if (i==columnas) {

        input.setAttribute("onChange", "mostrarBotones('','"+tablaSiguiente+"');");

     }

     TDt.appendChild(input);

     tr.appendChild(TDt);

  }

  tbl.appendChild(tr);

 
  tr = document.createElement("tr");

  nuevoTDb = document.createElement("td");

       nuevoTDb.setAttribute("align", "right");

       nuevoTDb.setAttribute("style", "font-size:10px;font-weight:bold");

       nuevoTDb.setAttribute("colspan", columnas);

 
  nuevoBoton = document.createElement("input");

     nuevoBoton.setAttribute("type", "image");

     nuevoBoton.setAttribute("id", "grabagr");

     nuevoBoton.setAttribute("accion", "grabagr");

     nuevoBoton.setAttribute("value", "Grabar");

     nuevoBoton.setAttribute("onClick", "mostrarBotones('','"+tablaSiguiente+"');");

     nuevoBoton.setAttribute("width", "30");

     nuevoBoton.setAttribute("height", "40");

     nuevoBoton.setAttribute("src", "./imagenes/zip_disk_flap_open_md_wht.gif");

  nuevoTDb.appendChild(nuevoBoton);

  tr.appendChild(nuevoTDb);

 
  tbl.appendChild(tbd);

  tbl.appendChild(tr);

  repor.appendChild(tbl);

 
  repor.style.display = "block";

}

cancer_15_4_9 · #3 (**permalink**) 14/11/2011, 10:36

Hola soy nueva en esto me lo podrias explicar.???? :D

augusto_jaramil · #4 (**permalink**) 14/11/2011, 11:26

Los parámetros que recibe la funcion creaTd:
1. columnas: el numero de columnas o td que va a crear
2. ident: un identificador para los atributos id que va a crear. //esta es opcional yo lo utilizo para mis códigos específicamente)
3. tablaActual: id del contenedor (tabla, div, etc) que va a contener, valga la redundancia, los elementos

Estos parámetros son específicos para mis códigos, no son obligatorios para todo proyecto.

En HTML cada tag debe tener un inicio y un fin, por llamarlo así, por ejemplo el tag table abre con <table> y cierra con </table> y así con cualquier otro elemento

Para efectos de abrir un tag dinámicamente se hace con document.createElement("elemento"). Aquí elemento se refiere al tag que vamos a crear (table, tr, ,p, span, div, td, input, etc)

Para efectos de cerrar un tag se hace con document.appendChild("elemento").

Para dar atributos se hace con document.setAttribute("atributo","valor")
Ejemplo: si le va a dar un atributo width="100%" al elemento table: document.setAttribute("width","100%")

No me extiendo mas....

Para lo demás, sugiero que busque documentación acerca de esto, en Internet se encuentra bastante

Con esto solo le doy una guiá de como lo puede hacer....

augusto_jaramil · #5 (**permalink**) 14/11/2011, 20:14

Hola de nuevo....

Por ahí rebuscando y buscando otras vainas me encontré esta página que tal vez te pueda ayudar con lo que necesitas. Te la recomiendo

http://www.telefonica.net/web2/blas-mar/index.html

Saludos

cancer_15_4_9 · #6 (**permalink**) 15/11/2011, 10:39

Hola el codigo siguiente es igual a la de esa pagina... con unos ajuste, la pregunta la habia hecho porque no sabia como hacerle para crear en la primera celda de cada columna un combo cargado con Ajax ya eso lo hace, pero despues quiero despues de crear el combo crear un checkbox, eso lo hace pero solo si no cargo el combo dependiente. No se si me explique cualquier ando por aqui.

Código:

// JavaScript Document
var miTabla = 'tabla'; // poner aquí el id de la tabla que queremos editar
var contLin=3
// preparar la tabla para edición
function iniciarTabla() {
 	tab = document.getElementById(miTabla);
  filas = tab.getElementsByTagName('tr');
  for (i=1; fil = filas[i]; i++) {
  	celdas = fil.getElementsByTagName('td');
    for (j=1; cel = celdas[j]; j++) {
      //if ((i>0 && j==celdas.length-1) || (i==filas.length-1 && j!=0)) continue; // La última columna  y la última fila no se pueden editar
      //cel.onclick = function() {crearInput(this)} 
    } // end for j 
  } //end for i
  
  // añadir funcion onclick a las imágenes para borrar y añadir y ocultar las imágenes de borrar
  for (i=0; im = document.images[i]; i++) 
    if (im.alt=='añadir fila')
      im.onclick = function() {anadir(this,0)}
    else if (im.alt=='añadir columna')  
      im.onclick = function() {anadir(this,1)}
    else if (im.alt=='borrar fila') {
      im.onclick = function() {borrar(this,0)}
      im.style.visibility = 'hidden';
    }
    else if (im.alt=='borrar columna') {
      im.onclick = function() {borrar(this,1)}
      im.style.visibility = 'hidden';
    }  
} // end function

// crear input para editar datos
function crearInput(celda) {
  celda.onclick = function() {return false}
  txt = celda.innerHTML;
  celda.innerHTML = '';
  obj = celda.appendChild(document.createElement('Input'));
  obj.value = txt;
  obj.focus();
  //obj.id=contLin;
  obj.onblur = function() {
    txt = this.value;
    celda.removeChild(obj);
    celda.innerHTML = txt;
    celda.onclick = function() {crearInput(celda)}

   
  }
}

// añadir filas o columnas
function anadir(obj,num) {
  var Contador=document.getElementById('txtColumnas').value+1;
  var ComboDirecciones=document.getElementById('CBDireccionC');
  var selecDIR=document.getElementById('CBDireccionC').value;
  var ComboGerencias=document.getElementById('CBCategoriasC');
  var selecGER=document.getElementById('CBCategoriasC').value;
  
  if (num==0) { // añadir filas
  fila = obj.parentNode.parentNode;
  nuevaFila = fila.cloneNode(true);
  im = nuevaFila.getElementsByTagName('img');
  im[0].onclick = function() {anadir(this,0)}
  im[1].onclick = function() {borrar(this,0)}
  for (i=2, tot=nuevaFila.getElementsByTagName('td').length-1; i<tot; i++) {
//    nuevaFila.getElementsByTagName('td')[i].onclick = function() {crearInput(this)} ;
    nuevaFila.getElementsByTagName('td')[i].innerHTML = '<input name="CBDoc" type="checkbox" id="CBDoc" value="checkbox" />';
    contar();
  }
  fila.parentNode.insertBefore(nuevaFila,fila);
  
  } // end añadir filas
  
  else { // añadir columnas
    tab = document.getElementById(miTabla);
    cabecera = tab.getElementsByTagName('tr')[0];
    // averiguar nº de columna
    for (num=0; cel = cabecera.getElementsByTagName('td')[num]; num++)
      if (cel==obj.parentNode) break;
    for (i=0; fila = tab.getElementsByTagName('tr')[i]; i++) {
      ele = fila.getElementsByTagName('td')[num];
      nuevaColumna = ele.cloneNode(true);

      if (i==0) {

          im = nuevaColumna.getElementsByTagName('img');
          im[0].onclick = function() {anadir(this,1)}
          im[1].onclick = function() {borrar(this,1)}


	  colum();
       }
	   
	   else {
		
					nuevaColumna.innerHTML = (i==1) ? '' : '<input name="CBDoc" type="checkbox" id="CBDoc" value="checkbox" />';
      }
	  if (i==1)
	  {

				nuevaColumna.appendChild(listaDIR);



		  
		 var capaGER = document.createElement('DIV');
		 capaGER.id="CAPAGerencia"+Contador;

		 
		 var listaGER = document.createElement('SELECT');
    	 listaGER.id="CBCategoriasC"+Contador;

    	 listaGER.className="CombosBox";
		  
		  for(var i=0;i<ComboGerencias.options.length;i++)
		  {
			  opcionger = document.createElement('OPTION');
			  opcionger.innerHTML = ComboGerencias.options[i].text;
			  opcionger.value = ComboGerencias.options[i].value;
		  if(selecGER==opcionger.value)
 			{ 
			  opcionger.selected=true;
			}
		listaGER.appendChild(opcionger)
			capaGER.appendChild(listaGER)
		    }
  		  
		  nuevaColumna.appendChild(capaGER);
          
		  
    		}	
		  
//		  nuevaColumna.innerHTML= (i==0) ? '': '<select id="CBSupervi" name="CBSupervis" class="CombosBox" title="Supervisor" ><option value="-1" selected="selected">&lt;Seleccionar&gt;</option></select>';  
       
	  fila.insertBefore(nuevaColumna,ele);						
	    
		

    } //end for i
  } // end añadir columnas
  mostrarImagenes();
}

// borrar filas o columnas 
function borrar(obj,num) {
  if (num==0) { // borrar filas
    tab = obj.parentNode.parentNode.parentNode;
    tab.removeChild(obj.parentNode.parentNode);
    contar2();
  } // end borrar filas
  else { // borrar columnas
    tab = document.getElementById(miTabla);
    cabecera = tab.getElementsByTagName('tr')[0];
    // averiguar nº de columna
    for (num=0; cel = cabecera.getElementsByTagName('td')[num]; num++)
      if (cel==obj.parentNode) break;
    for (i=0; fila = tab.getElementsByTagName('tr')[i]; i++)
      fila.removeChild(fila.getElementsByTagName('td')[num]);
      colum2();
    
      
  }

  mostrarImagenes();
}

// mostrar/ocultar imagenes para borrar
function mostrarImagenes() {
  tab = document.getElementById(miTabla);
  filas = tab.getElementsByTagName('tr');
  columnas = filas[0].getElementsByTagName('td');
  numFilas = filas.length;
  numColumnas = columnas.length;
  for (i=0; im=tab.getElementsByTagName('img')[i]; i++)
    if (im.alt == 'borrar fila')
      im.style.visibility = (numFilas>4) ? 'visible' : 'hidden';
    else if (im.alt == 'borrar columna')
      im.style.visibility = (numColumnas>3) ? 'visible' : 'hidden';



}

function contar() {
   var txtFilas=document.getElementById("tbdetalle").rows.length+1;
   document.forms.forma.txtFilas.value=txtFilas;
}

function contar2() {
   var txtFilas=document.getElementById("tbdetalle").rows.length;
   document.forms.forma.txtFilas.value=txtFilas;
}

function colum() {
   var txtColumnas=document.getElementById("tbencabezado").rows[0].cells.length-1;
   document.forms.forma.txtColumnas.value=txtColumnas;
   
}

function colum2() {
   var txtColumnas=document.getElementById("tbencabezado").rows[0].cells.length-2;
   document.forms.forma.txtColumnas.value=txtColumnas;
   
}

Aqui dejo el link... de la imagen.... por si no me explique .

http://img268.imageshack.us/img268/2664/dibujo1zl.jpg