tabla dinamica con javascript

[manuelle]

hola comunidad tengo un problema quiero hacer una funcion javascript que me permita crear una tabla, como parametro de la funcion quiero pasarle la cantidad de columnas que va a tener y el nombre que tendra cada una, quiero que sea como un objeto tabla que se le pasa un array qe contiene los nombres de las columnas que va ha tener como puedo hacer esto, agradecere cualquier ayuda

saludos manuelle

[zerokilled]

hasta el momento, ¿que tienes hecho? cuando dices el nombre de la columna, a que te refieres... ¿un label o texto para identificar las columnas? como guia, la funcion pudiera aceptar dos parametros: el array de label y un parametro opcional para indicar la cantidad de filas de la tabla. la cantidad de columna se determinaria por la longitud del array. luego seria cuestion de recorrer el array para ir creando las celdas de la tabla. para ello, seria apropiado usar las funciones del DOM para crear la tabla. en los siguientes enlaces tienes las funciones DOM para manipular o crear tablas.
http://www.w3schools.com/jsref/dom_obj_table.asp
http://www.w3schools.com/jsref/dom_obj_tablerow.asp
http://www.w3schools.com/jsref/dom_obj_tabledata.asp

[stock]

Mira, yo he creado un componente que me crea una tabla dinámicamente, para usarla simplemente hago lo siguiente:

Código Javascript:

var grid = new App.Grid({
   id : "ejemplo",
   columns : [
      {header:"Nombre",dataIndex:"name",sortable:true},
      {header:"Apellido",dataIndex:"lastname",sortable:true},
      {header:"Edad",dataIndex:"age",sortable:true},
      {header:"Email",dataIndex:"email",sortable:true}
   ],
   stripeRows : true
});
 
grid.render("idDeUnElemento");
 
grid.load({
   url  : "serverside/cargarInformacion.php"
});
 

El JSON que regresa el servidor con la información a desplegar en el body sería algo así:

Código Javascript:

[
{name:"Crysfel",lastname:"Villa",age:"26",email:"[email protected]"},
{name:"John",lastname:"Doe",age:"26",email:"[email protected]"},
{name:"Sasha",lastname:"Cohen",age:"26",email:"[email protected]"}
]
 

Si a algo así te refieres vas por buen camino! la idea es reutilizar componentes, hacerlos una sola vez y permitir crear nuevos con diferentes configuraciones.

Ahora, la parte interesante viene al hacer el componente, primero debes tener buenos conocimientos de POO, conceptos fundamentales de JavaScript, como es el scope, closures, eventos, etc..., el código que tengo del componente que te comento es semejante al siguiente:

Código Javascript:

var App = {};
 
App.Grid = function(config){
 
    //aplicar las configuraciones al objeto
 
    //crear la tabla
    this.createHeader();
    this.createBody();
 
    //si el usuario lo configura se renderiza la tabla desde el inicio
    if(this.renderTo){
        //ejecutar método render...
    }
 
    //se realiza la petición ajax si se configura el autoLoad = true
    if(this.autoLoad){
       this.load(config.url);
    }
}
 
App.Grid.prototype = {
    renderTo : false,
    autoLoad: false,
 
    render  : function(where){
 
    },
 
    createHeader : function(){
 
    },
 
    load  : function(url){
        
    }
}
 

Mas o menos así es como lo tengo, te he dado una idea.

Saludos