Transponer una matriz de TD en columnas jQuery
Ayúdame a colocar las celdas con una clase que corresponda al encabezado de la columna, en la columna correspondiente. La iteración debe hacerse por columna y luego recorrer eltable.temp
TD array y reemplace la primera celda vacía encontrada con la primera temp td encontrada.
El resultado final debe ser similar a la tabla encontradaaquí.
var $tempScanner = $('table.temp tr td');
var tempArry = [];
$tempScanner.each(function() {
tempArry.push($(this));
});
tempArry = tempArry.sort();
td,
th {
border: 1px solid #111;
padding: 6px;
}
th {
font-weight: 700;
}
span.pull-right {
float: right;
text-align: right;
}
.a,
.A {
background-color: #ACE;
}
.b,
.B {
background-color: #FAF;
}
.c,
.C {
background-color: #BAB;
}
.d,
.D {
background-color: #ECA;
}
.targetFound {
border: solid 2px red;
}
<table style="display:block;" class="temp"><tbody><tr><td colspan="2" data-id="1" data-catg="a" class="a">Ooo<span class="pull-right">kr.8</span></td><td colspan="2" data-id="7" data-catg="b" class="b">Pppp<span class="pull-right">kr.10</span></td><td colspan="2" data-id="12" data-catg="c" class="c">Kkkk<span class="pull-right">kr.6</span></td><td colspan="2" data-id="2" data-catg="a" class="a">Ffff<span class="pull-right">kr.8</span></td><td colspan="2" data-id="4" data-catg="b" class="b">Ssss<span class="pull-right">kr.10</span></td><td colspan="2" data-id="15" data-catg="c" class="c">Vvvv<span class="pull-right">kr.6</span></td><td colspan="2" data-id="5" data-catg="b" class="b">Iiii<span class="pull-right">kr.10</span></td><td colspan="2" data-id="21" data-catg="c" class="c">Llll<span class="pull-right">kr.6</span></td><td colspan="2" data-id="22" data-catg="a" class="a">Mmmm<span class="pull-right">kr.9</span></td><td colspan="2" data-id="7" data-catg="b" class="b">Bbbb<span class="pull-right">kr.12</span></td><td colspan="2" data-id="8" data-catg="b" class="b">Eeee<span class="pull-right">kr.8</span></td><td colspan="2" data-id="9" data-catg="c" class="c">Gggg<span class="pull-right">kr.6</span></td><td colspan="2" data-id="10" data-catg="c" class="c">Cccc<span class="pull-right">kr.6</span></td><td colspan="2" data-id="11" data-catg="c" class="c">Aaaa<span class="pull-right">kr.6</span></td><td colspan="2" data-id="6" data-catg="b" class="b">Nnnn<span class="pull-right">kr.10</span></td><td colspan="2" data-id="3" data-catg="a" class="a">Zzzz<span class="pull-right">kr.8</span></td><td colspan="2" data-id="13" data-catg="c" class="c">Mmmm<span class="pull-right">kr.6</span></td><td colspan="2" data-id="14" data-catg="c" class="c">Rrrr<span class="pull-right">kr.6</span></td><td colspan="2" data-id="17" data-catg="d" class="d">Hhhh<span class="pull-right">kr.5</span></td><td colspan="2" data-id="18" data-catg="d" class="d">Uuuu<span class="pull-right">kr.5</span></td><td colspan="2" data-id="19" data-catg="d" class="d">Qqqq<span class="pull-right">kr.5</span></td><td colspan="2" data-id="20" data-catg="d" class="d">Xxxx<span class="pull-right">kr.5</span></td></tr></tbody></table>
<table id="tblGrid">
<tbody><tr>
<th class="A" colspan="2">A</th>
<th class="B" colspan="2">B</th>
<th class="C" colspan="2">C</th>
<th class="D" colspan="2">D</th>
</tr>
<tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr></tbody></table>