viernes, 8 de febrero de 2013

Crear tabla ingresando variables en JAVASCRIPT con JQUERY




Vamos a crear una tabla ingresando variables (":","_","/","*",";")

creando modelo de plantilla
=========================================*/

pantalla tipo _ plasma  /
                   plasma  *
proporcion _ wide ;
caracteristicas contraste  _ 5000  *
       contraste  _ 5000  *
    contraste  _ 5000  ;
tiempo 8 minutos ;

|-------------------------------------------------------|
|                      | | plasma |
|                    | tipo                |-------------------|
| pantalla          | | plasma |
|                    |---------------------------------------|
|                    | proporcion | wide |
|------------------------------------------------------------|
|                    | contraste         | 5000               |
  |----------------------------------------|
| caracteristicas | contraste          | 5000               |
                  |---------------------------------------|
|                    | contraste   | 5000                     |
|------------------------------------------------------------|
| tiempo           | 8 minutos                                 |
|------------------------------------------------------------|



Codigo JAVASCRIPT

$("#txtPlantillaTexto").keyup(function () {

var texto = $(this).val();
var cant1=texto.split(';');

// creando tabla
var htmlTabla='<table class="tabla">';
for (var i = 0; i < cant1.length-1; i++){
// contando rowspan
var c1=cant1[i].split("/");
var c2=cant1[i].split("*");
var ct=(c1.length+c2.length)-1;
var culumnaUno=cant1[i].split(":");

htmlTabla=htmlTabla+'<tr><td rowspan="'+ct+'">'+culumnaUno[0]+'</td>';
      var cant2=culumnaUno[1].split("*");
      //creando la segunda columna
      for (var ii = 0; ii < cant2.length; ii++){
var culumnaDos=cant2[ii].split("_");
if (culumnaDos.length>1) {
var cant3=culumnaDos[1].split("/");
var colspan='1';
}else{
var cant3=0;
var colspan='2';
}

   htmlTabla=htmlTabla+'<td rowspan="'+(cant3.length)+'" colspan="'+colspan+'">'+culumnaDos[0]+'</td>';
   
if (culumnaDos.length>1) {
//creando la tercera columna
for (var iii=0; iii < cant3.length; iii++){
   htmlTabla=htmlTabla+'<td>'+cant3[iii]+'</td></tr><tr>';
}
}else{
htmlTabla=htmlTabla+'</tr><tr>';
}
}
htmlTabla=htmlTabla+'</tr>';
}

htmlTabla=htmlTabla+'</table>';

$("#txtPlantillaResultado").html(htmlTabla);
}).keyup();


0 comentarios:

Publicar un comentario