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();
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario