[SOLUCIONADO] Saber a que fila pertenece un elemento

[legomolina]

Buenas, tengo la siguiente duda. ¿Puedo saber a qué fila dentro de una tabla pertence un elemento? Ejemplo:

Código HTML:

<table id="tabla">
<tr>
    <td>
      <input type="text" id="input1">
    </td>
    <td>
      <input type="text" id="input2">
    </td>
 </tr>
 <tr>
    <td>
      <input type="text" id="input3">
    </td>
    <td>
      <input type="text" id="input4">
    </td>
  </tr>
</table>
 

Podría averiguar a que "row" pertenece el input3? Es decir, podría saber esto: table.rows[fila del input]? Que índice del objeto es?
Gracias

[Alexis88]

De esta manera:

Código Javascript:

[].forEach.call(document.querySelectorAll("#tabla [type=text]"), function(input){
    input.value = "Fila " + input.parentNode.parentNode.rowIndex;
});
 

Tomo a las cajas de texto contenidas en la tabla y, en cada una de ellas, tomo a la fila en la que se encuentra la caja de texto actual en la iteración y el número de fila que representa a través de la propiedad rowIndex. Hay dos parentNode ya que debo de tomar primero al elemento padre de la caja de texto, que es la celda, y luego al elemento padre de esta última, es decir, la fila. Recuerda también que el número de filas empieza desde cero, como en los arrays.

Saludos

[legomolina]

Buenas. La propiedad "rowIndex" necesita de jQuery para funcionar? Es que no lo estoy usando. Lo de las iteraciones lo puedo solucionar con otra cosa pero lo del rowindex no.
Gracias

[Alexis88]

Dicha propiedad es nativa de JavaScript y funciona en todas las versiones de todos los navegadores. Quizá si nos muestras el código actualizado, podamos ver el error que estás cometiendo. Y para que puedas usar el método forEach en todos los navegadores, implementa este algoritmo al inicio de tu archivo JS.

Saludos

[legomolina]

Buenas. Funciona a la perfección. Gracias
Otra duda: puedo buscar una etiqueta con parentNode? Es decir, imaginemos la siguiente tabla

Código HTML:

<table id="tablaej">
    <tr>
        <td>
            <input type="text" name="elemento" id="id0">
        </td>
        <td>
            <input type="text" name="elemento" id="id1">
        </td>
        <td>
            <input type="text" name="elemento" id="id2">
        </td>
        <td>
            <input type="text" name="elemento" id="id3">
        </td>
        <td>
            <input type="text" name="elemento" id="id4">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="elemento" id="id10">
        </td>
        <td>
            <input type="text" name="elemento" id="id11">
        </td>
        <td>
            <input type="text" name="elemento" id="id12">
        </td>
        <td>
            <input type="text" name="elemento" id="id13">
        </td>
        <td>
            <input type="text" name="elemento" id="id14">
        </td>
    </tr>
</table>
 

Como podría hacer que te fuese recorriendo los parentNode hasta encontrar uno con un tagName=="TR"?
Es un poco dificil de explicar. En el esquema que adjunto lo que me gustaría hacer es que desde input id="id14" fuese recorriendo sus parentNode (<td><tr>...) hasta que encontrase el <tr> que entonces pararía. Supongo que con un while que evalue una variable en false hasta que, cuando encuentre el tr se ponga en true y salte el while y se quede almacenado ese elemento (<tr>) en una variable para trabajar más adelante con él.
Esquema: http://i.imgur.com/Y1P7Fio.png
Siento haberte hecho un lío xD
Gracias

[Alexis88]

No hace falta un bucle para obtener ese dato, pues, como podrás ver, cada caja de texto se encuentra en una celda contenida en una fila junto a otras celdas, por lo que, para obtener la fila en la que se encuentra, basta con que lo hagas como te expliqué en la respuesta anterior, además, no hace falta comprobar de que se trate de una fila, pues, de todos modos obtendrás a la fila utilizando el doble parentNode.

Saludos

[legomolina]

Ah claro. De todas formas suponiendo que hubiesen divs dentro de divs dentro del td xDD como podría averiguarlo suponiendo que no se en qué div me encuentro? Jaja

[Alexis88]

Podrías realizar la búsqueda con ayuda de un bucle que vaya desde el primer elemento padre de la caja de texto hasta la raíz del documento o el límite que especifiques. En la librería jQuery, existe un método llamado parents con el cual puedes obtener a todos los elementos padre del elemento indicado o solo a los que desees encontrar, ya sea por el tipo de elemento, id o clase.

Como me interesó el tema, elaboré un pequeño, limitado pero funcional método con características muy similares al del que menciono.

Código Javascript:

window.Element.prototype.parents = function(){
    var target = arguments.length ? 
                 document.querySelectorAll(arguments[0]) : 
                 document.querySelectorAll("*"), 
        ancestors = [], 
        list = [].slice.call(target), i;
    for (i = this.parentNode; i != document; i = i.parentNode)
        if (list.indexOf(i) > -1) ancestors.push(i);
    return ancestors.length > 1 ? ancestors : ancestors[0];
};
 
var foo = document.querySelector("#foo"); //Toma al elemento de id 'foo'
foo.parents("tr").style.background = "red"; //Pinta de rojo el fondo de la fila en la que se encuentra el elemento
console.log(foo.parents("tr").rowIndex); //Muestra el número de fila en la que se encuentra el elemento
 

Como te comenté, busco desde el primer elemento padre del elemento en cuestión hasta que lleguemos a la raíz del documento (<html>) y, al final de cada iteración, tomaremos al elemento padre del elemento actual. Previamente, tomaré al conjunto de elementos que coincidan con el tipo de elemento que estoy buscando, en este caso, filas de una tabla, pero si no se especifica el tipo de elemento a buscar, se toman a todos. Como el método querySelectorAll devuelve una lista de nodos y no un array para poder utilizar alguno de los métodos de búsqueda de JS, lo convierto en un array utilizando el método slice.

En el bucle, utilizo el método indexOf para buscar a los elementos en la lista que coincidan con el elemento padre actual en la iteración, en otras palabras, en el bucle, estamos iterando a los elementos padre del elemento clave (la caja de texto), mientras que, en el array list, tengo ya sea a todos los elementos del documento, a todos los elementos cuyo tipo de elemento o clase sean igual al especificado o al elemento cuyo id sea el que se indicó. En caso de darse la coincidencia en cada búsqueda, se asigna al elemento encontrado en el array ancestors y, finalizado el bucle, se devuelve dicho conjunto, si es que tiene a más de un elemento, o solo al elemento encontrado, en caso de que —obviamente— sea solo uno.

Como el método indexOf para arrays funciona en todos los navegadores excepto en versiones anteriores a IE9, te sugiero implementar este algoritmo al inicio del archivo JS. Y lo mismo va por el método querySelectorAll en caso de que desees que esto funcione en versiones anteriores a IE8, pudiendo evitar el inconveniente de la compatibilidad implementando este algoritmo.

DEMO

Saludos

[legomolina]

Muy bueno la verdad. Lo probare a fondo a ver que tal funciona. Muchisimas gracias :)