¿Cómo encontrar y el cambio se multiplican th clases entre n y n
-
22-09-2019 - |
Pregunta
Tengo cierta estructura de la tabla:
<tr class="row-2"><tr>
<tr class="row-3">..<tr>
<tr class="row-4">..<tr>
<tr class="row-5">..<tr>
<tr class="row-6">..<tr>
<tr class="row-7"><tr>
<tr class="row-8">..<tr>
<tr class="row-9">..<tr>
<tr class="row-10">..<tr>
<tr class="row-11">..<tr>
...etc
para este ejemplo TR con clases de "fila-2" y "fila-7" es parrent enlace del producto wich expandir filas secundarias.
<script>
$(function() {
$('tr.parent')
.css("cursor","pointer")
.css("color","red")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
</script>
Filas -3 ...- 6 es hijo de la fila-2 y Filas -8 ...- 11 es hijo de la fila-7
¿Cómo puedo encontrar la fila-2, fila 7, etc a continuación, añadir segunda clase "padre" y el ID de clase similar (id = "fila-2", id = "fila-7", etc.)? También tengo que añadir en cada TR entre fila-2 y fila-7 clase son iguales fila primaria anterior. En conclusión necesito algo como esto:
<tr class="row-2 parent" id="row-2"><tr>
<tr class="row-3 child-row2">..<tr>
<tr class="row-4 child-row2">..<tr>
<tr class="row-5 child-row2">..<tr>
<tr class="row-6 child-row2">..<tr>
<tr class="row-7 parent" id="row-7"><tr>
<tr class="row-8 child-row7">..<tr>
<tr class="row-9 child-row7">..<tr>
<tr class="row-10 child-row7">..<tr>
<tr class="row-11 child-row7">..<tr>
..etc
Solución
Una forma es hacer un paso dos en todas las filas, para establecer las clases requeridas y el ID del. En el primer paso, añadir un id mismo que el nombre de la clase, y también añadir la clase parent
a fila-2, y la fila-7. En el segundo paso, encontrar cada fila .parent
, y agregar la clase child-<id>
a sus hermanos hasta la siguiente matriz. En lugar de la codificación dura de los valores para la fila y la fila-2-7, esto supone que todos los elementos de cabecera están contenidas dentro de un elemento <th>
, en lugar de un elemento <td>
.
Aquí hay algo de código: http://jsfiddle.net/vYTW2/
/**
* Do a two pass on all rows to set them up.
* In the first pass, add the same id as class, and
* add the "parent" class to the row.
*
* Assuming all product header rows contain a
* <th> element
*/
$('table tr th').each(function() {
var row = $(this).parent('tr');
var id = row.attr('class');
row.attr('id', id);
row.addClass('parent');
});
/**
* In the second pass, run through all header rows
* (that have the class parent) and mark all next siblings
* with class "child-rowX" until we see the next parent row.
*/
$('tr.parent').each(function() {
var id = $(this).attr('id');
var className = 'child-' + id;
$(this).nextUntil('.parent').addClass(className);
});