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"><Seleccionar></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