Intentaré explicar el problema que tengo y las diferentes soluciones que he probado para solucionarlo. He probado tantas que no se si poner más de una podría hacer que todo el post pase a ser ininteligible. Si este es el caso, tambien pido perdón .
Funcionamiento deseado (SIMPLIFICADO):
- Con un botón introducir una nueva fila en una tabla. En una celda de esta fila, se introduce un componente del tipo checkbox.
- Con otro botón, poder ver el estado del checkbox (atributo "checked").
Lo de introducir la fila no me da ningun problema (lo he hecho de varias maneras, lo podreís ver a continuación).
El problema es buscar el valor del atributo checked. Creo que el problema está relacionado con el DOM el cual no reconoce lo que introduzco como un "input".
A continuación os pongo las diferentes formas que he probado para:
Introducir fila en la tabla:
Forma 1:
Utilizo innerHTML he introduzco a "pelo" el componente checkbox.
Código:
var numero = 0; this.addNewRow = function(familia, marca){ // obtenemos acceso a la tabla por su ID var TABLE = document.getElementById("tabla"); // obtenemos acceso a la fila maestra por su ID //var TROW = document.getElementById("celda"); // tomamos la celda //var content = TROW.getElementsByTagName("td"); // creamos una nueva fila var newRow = TABLE.insertRow(-1); newRow.id= 'colum'+numero; // creamos una nueva celda var newCell = newRow.insertCell(newRow.cells.length) // creamos una nueva ID para el examinador newID = 'file_' + (numero); newCell.id=newID; txt = '<input type="checkbox" id="' + numero + '">' newCell.innerHTML = txt; newRow.appendChild(newCell); document.getElementById('tabla').appendChild(newRow); numero = numero+1; }
Forma 2:
No utilizo innerHTML, lo he hecho pensando que "quizás" innerHTML sólo te introduce un texto que luego el navegador puede interpretar pero que en el DOM no es reconocido como, en este caso, un checkbox. Locuras mias jajaja
Código:
Encontrar checkbox:var numero = 0; this.addNewRow = function(familia, marca){ // obtenemos acceso a la tabla por su ID var TABLE = document.getElementById("tabla"); // creamos una nueva fila var newRow = TABLE.insertRow(-1); newRow.id= 'colum'+numero; // creamos una nueva celda var newCell = newRow.insertCell(newRow.cells.length) newID = 'file_' + (numero); newCell.id=newID; txt = document.createElement('input'); alert("txt: " + txt); txt.type= 'checkbox'; alert("txt.type: " + txt.type); txt.checked=true; txt.name="borrar"; newCell.appendChild(txt); newRow.appendChild(newCell); document.getElementById('tabla').appendChild(newRox); numero = numero+1; }
Forma 1:
Lo he simplificado lo máximo posible, simplemente busco el checkbox (o en su defecto "newRow", ninguna de las dos busquedas me funciona), ya que en cuanto lo encuentre, todo deberia funcionar
Código:
Forma 2:this.buscar =function(){ var busc = document.getElementById('newRow'); alert("busc= " + busc); }
Aquí busco el numero de entradas de la tabla (y que funciona bien) y saco el innerHTML de la celda que busco (también me va bien). El problema es que no encunetra ningun "input", y lo necesito encontrar para poder ver sus atributos.
Código:
Espero que se haya podido entender. Las diferentes soluciones que he posteado las acabo de "picar" (puede haber algun error de sintaxis) basandome a las implementaciones que he probado en estos dias. Es para que os hagais una idea de lo que he hecho, ya que es posible que por algun error de sintaxis estas lineas de condigo no funcionen del todo bien.this.verElementos =function(){ var i=1; var encontrado=0; var TABLE = document.getElementById("tabla"); //numero entradas tabla alert("length= " + TABLE.rows.length); //innerHTML entrada selecciona alert(TABLE.rows[1].cells[0].innerHTML); //busqueda checkbox de la primera nueva entrada que he hecho //No funciona ni por tag, ni por id, ni por nada... alert("antes: " + tabla.rows[1].cells[0].getElementByTag("input")); }
Alguien podría ayudarme con mi problema?
Gracias por todo, saludos!!