Atributo 'checked' en checkbox

GoRaXaN · #1 (**permalink**) 14/08/2007, 01:08

Hola, quisiera saber porque cuando ordeno una tabla (que tiene una columna de checkbox, para poder borrar multiples filas a la vez por ejemplo) al ordenar no me recuerda las checkbox que estan marcadas (el atributo checked desaparece del input checkbox).
He probado ya varios metodos de ordenacion, incluso he usado algoritmos de otra gente y en todos los casos me pasa igual: ordena bien pero todas las checkbox aparecen desmarcadas sea cual sea su estado anterior.

GoRaXaN · #2 (**permalink**) 14/08/2007, 02:28

Por cierto, esto que comento ocurre en IE6 que es el navegador que tenemos en el trabajo.

derkenuke · #3 (**permalink**) 14/08/2007, 19:36

No se puede saber a ciegas, pero supongo que el método de ordenación elimina y crea celdas, en vez de moverlas. Esto puede ser que lo haga guardando los contenidos de las celdas que va a eliminar en un array por ejemplo, y luego aplicándolos a las nuevas celdas creadas. En este caso sólo se copiaría el HTML (innerHTML), y si el checkbox está checked, no sabría decirte si se mantendría o no en ese estado.

Un saludo.

GoRaXaN · #4 (**permalink**) 22/08/2007, 04:16

Entonces al obtener el codigo html (innerHTML) los atributos no se obtienen?
Hice una prueba que consistia en hacer un alert del innerHTML de cada fila que se movia para ordenar la tabla justo antes y justo despues de moverla. Antes de moverla aparecia el atributo checked y despues de moverla ya no estaba.

Código:

//Si hago un alert de tabla.rows[minIdx].innerHTML aparece checked en el input
tmpel = tabla.removeChild(tabla.rows[minIdx]);
tabla.insertBefore(tmpel, tabla.rows[i]);
//Si hago un alert de tabla.rows[i].innerHTML todo aparece igual menos el atributo checked que no aparece

Esto me obliga a guardarme el estado previamente y restaurarlo luego:

Código:

var ss = tabla.rows[minIdx].cells[k].getElementsByTagName('input')[0].checked;
//aqui vendria el codigo de arriba que mueve la fila donde le toca
tabla.rows[i].cells[k-1].getElementsByTagName('input')[0].checked = ss;

Con este sistema de ordenacion puedo "restaurar" el estado checked porque puedo saber donde quedará la fila ordenada pero con otros mas complejos y eficientes (vease mergesort) no puedo saberlo por lo tanto no puedo restaurar el estado.

Puede parecer una tonteria pero jode mucho que tarde 8 segundos en ordenar una tabla cuando podria hacerlo en 1 o 2 segundos.

Alguna recomendacion? Gracias!

derkenuke · #5 (**permalink**) 22/08/2007, 13:53

Bueno, te confieso que nunca he trabajado con ordenamiento de tablas, pero si el problema es que en FF no se modifica el innerHTML siempre se puede "forzar" a que lo haga cada vez que hagamos click en un checkbox.

Yo lo he conseguido en el siguiente ejemplo con éste código "sencillo":

Código PHP:

  // Quitar o poner el atributo checked en los checkbox al cambiar su estado.

( function() {

    var inputs = document.getElementsByTagName("input");

    for(var i=0; i<inputs.length; i++) {

        if( (inputs[i].type == "checkbox") && (inputs[i].addEventListener) ) { // Se presupone estándar tipo Firefox, habría que probar otros navegadores.

            inputs[i].addEventListener("click", function() {

                if( this.checked )

                    this.setAttribute("checked", "checked");

                else

                    this.removeAttributeNode( this.getAttributeNode("checked") );

            }, false);

        }

    }

} ) ();

Asignamos un evento onclick para cada checkbox y si acepta addEventListener (se presupone un navegador con DOM estándar) entonces eliminamos o colocamos su atributo checked en consecuencia.

Este ejemplo se ve completo cómo trabajaría:

Código PHP:

  <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

<meta name="Author" content="derkeNuke" />

<title>Página nueva</title>

<style type="text/css">

</style>

</head>

 
<body>

 
<label id="elLabel"> Checkbox

    <input type="checkbox" checked="true" />

</label> <br/>

<button type="button" onclick="e($('elLabel').innerHTML)"> Escribir su innerHTML en el documento </button> <br/>

<button type="button" onclick="ponHTMLenPruebas($('elLabel').innerHTML)"> Pon su innerHTML actual en el DIV pruebas</button> <br/>

 
 
<div id="pruebas" style="border:solid 2px black;"> DIV PRUEBAS <br/> </div>

 
<script type="text/javascript">

 
// escribir en el documento.

function e(q,noBr) {

    document.body.appendChild( document.createTextNode(q) );

    if(!noBr) document.body.appendChild( document.createElement("BR") );

}

// obtener elemento por id.

function $(x) { return document.getElementById(x); }

 
 
function ponHTMLenPruebas(HTML) {

    $("pruebas").innerHTML += HTML+" <br/>";

}

 
// Quitar o poner el atributo checked en los checkbox al cambiar su estado.

( function() {

    var inputs = document.getElementsByTagName("input");

    for(var i=0; i<inputs.length; i++) {

        if( (inputs[i].type == "checkbox") && (inputs[i].addEventListener) ) { // Se presupone estándar tipo Firefox, habría que probar otros navegadores.

            inputs[i].addEventListener("click", function() {

                if( this.checked )

                    this.setAttribute("checked", "checked");

                else

                    this.removeAttributeNode( this.getAttributeNode("checked") );

            }, false);

        }

    }

} ) ();

 
 
</script>

 
</body>

</html>

No sé si es lo que buscas, pero al copiar su innerHTML a la capa pruebas se copia si realmente está checked o no, sin hacer comprobaciones de ningún tipo ni ralentizar el navegador más de la cuenta a la hora de hacer la operación.

Obviamente funciona en los dos navegadores (he probado en IE6 y FF2).

Entonces nos olvidaríamos de comprobaciones auxiliares a la hora de ordenar. ¿Quizás puedas arreglarlo así?