I have asp gridview that the server throws me with format, the client side looks like this
<div class="row">
<div class="col-md-12">
<input id="chkPer" type="checkbox" name="chkPer" checked="checked" /><label for="chkPer">Mostrar %</label>
</div>
<table cellspacing="0" id="GVBalance" style="width:100%;border-collapse:collapse;">
<tr class="GridviewScrollItem">
<td> </td><td> </td><td class="FILACSS" colspan="4">COMPARATIVO ANUAL ABRIL</td>
</tr><tr class="GridviewScrollItem">
<td> </td><td> </td><td class="FILACSS" colspan="2">2015</td><td class="FILACSS" colspan="2">2016</td>
</tr><tr class="GridviewScrollItem">
<td> </td><td> </td><td class="FILACSS">C$</td><td class="FILACSS">%</td><td class="FILACSS">C$</td><td class="FILACSS">%</td>
</tr><tr class="GridviewScrollItem">
<td class="azulCSS2">11</td><td class="azulCSS2">TOTAL ACTIVO CORRIENTE</td><td class="azulCSS">39,945,142.23</td><td class="azulCSS">79.16 %</td><td class="azulCSS">45,671,479.46</td><td class="azulCSS">78.37 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1101</td><td class="negroCSS2">Efectivo en Caja</td><td class="negroCSS">914,555.36</td><td class="negroCSS">1.81 %</td><td class="negroCSS">826,433.02</td><td class="negroCSS">1.42 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1102</td><td class="negroCSS2">Efectivo en Bancos</td><td class="negroCSS">20,490,841.32</td><td class="negroCSS">40.61 %</td><td class="negroCSS">11,250,970.44</td><td class="negroCSS">19.31 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1109</td><td class="negroCSS2">Depósitos a plazo fijo</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">14,707,081.35</td><td class="negroCSS">25.24 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1103</td><td class="negroCSS2">Cuentas por Cobrar Clientes</td><td class="negroCSS">5,699,518.52</td><td class="negroCSS">11.30 %</td><td class="negroCSS">5,868,918.84</td><td class="negroCSS">10.07 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1104</td><td class="negroCSS2">Cuentas por Cobrar Funcionarios y Empleados</td><td class="negroCSS">91,622.19</td><td class="negroCSS">0.18 %</td><td class="negroCSS">62,121.98</td><td class="negroCSS">0.11 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1105</td><td class="negroCSS2">Documentos por Cobrar</td><td class="negroCSS">146,861.07</td><td class="negroCSS">0.29 %</td><td class="negroCSS">-174.11</td><td class="negroCSS">0.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1106</td><td class="negroCSS2">Inventarios</td><td class="negroCSS">8,954,671.52</td><td class="negroCSS">17.75 %</td><td class="negroCSS">9,829,155.64</td><td class="negroCSS">16.87 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1107</td><td class="negroCSS2">Impuestos pagados por Anticipado</td><td class="negroCSS">3,052,059.73</td><td class="negroCSS">6.05 %</td><td class="negroCSS">2,394,419.69</td><td class="negroCSS">4.11 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1108</td><td class="negroCSS2">Pagos Anticipados</td><td class="negroCSS">595,012.52</td><td class="negroCSS">1.18 %</td><td class="negroCSS">732,552.61</td><td class="negroCSS">1.26 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2"> </td><td class="negroCSS2"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="azulCSS2">12</td><td class="azulCSS2">TOTAL ACTIVOS NO CORRIENTES</td><td class="azulCSS">10,515,328.84</td><td class="azulCSS">20.84 %</td><td class="azulCSS">12,598,235.44</td><td class="azulCSS">21.62 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1201</td><td class="negroCSS2">Terrenos</td><td class="negroCSS">444,754.76</td><td class="negroCSS">0.88 %</td><td class="negroCSS">444,754.76</td><td class="negroCSS">0.76 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1202</td><td class="negroCSS2">Edificios e Intalaciones</td><td class="negroCSS">1,466,691.35</td><td class="negroCSS">2.91 %</td><td class="negroCSS">1,286,435.82</td><td class="negroCSS">2.21 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1203</td><td class="negroCSS2">Maquinaria y Equipos</td><td class="negroCSS">4,399,027.74</td><td class="negroCSS">8.72 %</td><td class="negroCSS">4,482,545.25</td><td class="negroCSS">7.69 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1204</td><td class="negroCSS2">Vehiculos</td><td class="negroCSS">2,881,285.00</td><td class="negroCSS">5.71 %</td><td class="negroCSS">2,838,713.02</td><td class="negroCSS">4.87 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1205</td><td class="negroCSS2">Mobiliario y Equipo de Oficina</td><td class="negroCSS">367,350.21</td><td class="negroCSS">0.73 %</td><td class="negroCSS">430,040.52</td><td class="negroCSS">0.74 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1206</td><td class="negroCSS2">Herramientas y Enseres</td><td class="negroCSS">18,438.78</td><td class="negroCSS">0.04 %</td><td class="negroCSS">30,290.46</td><td class="negroCSS">0.05 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1207</td><td class="negroCSS2">Equipo de Laboratorio</td><td class="negroCSS">99,832.63</td><td class="negroCSS">0.20 %</td><td class="negroCSS">83,873.61</td><td class="negroCSS">0.14 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1208</td><td class="negroCSS2">Otros</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1210</td><td class="negroCSS2">Proyecto de Certificación ISO</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">47,801.96</td><td class="negroCSS">0.08 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1213</td><td class="negroCSS2">Activos Intangibles</td><td class="negroCSS">539,075.03</td><td class="negroCSS">1.07 %</td><td class="negroCSS">543,162.30</td><td class="negroCSS">0.93 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1214</td><td class="negroCSS2">Pagos Anticipados Proveedores</td><td class="negroCSS">298,873.34</td><td class="negroCSS">0.59 %</td><td class="negroCSS">1,302,764.19</td><td class="negroCSS">2.24 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1215</td><td class="negroCSS2">Proyectos de Inversión en Proceso</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">1,107,853.55</td><td class="negroCSS">1.90 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2"> </td><td class="negroCSS2"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="azulCSS2">13</td><td class="azulCSS2">OTROS ACTIVOS</td><td class="azulCSS">0.00</td><td class="azulCSS">0.00 %</td><td class="azulCSS">4,257.36</td><td class="azulCSS">0.01 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">1301</td><td class="negroCSS2">Depósitos en Garantía</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">4,257.36</td><td class="negroCSS">0.01 %</td>
</tr><tr class="GridviewScrollItem">
<td class="naranjaCSS2"> </td><td class="naranjaCSS2">TOTAL ACTIVO</td><td class="naranjaCSS">50,460,471.07</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">58,273,972.26</td><td class="naranjaCSS">100.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2"> </td><td class="negroCSS2"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="azulCSS2">21</td><td class="azulCSS2">TOTAL PASIVO CORRIENTE</td><td class="azulCSS">17,435,664.02</td><td class="azulCSS">77.69 %</td><td class="azulCSS">18,302,928.33</td><td class="azulCSS">77.13 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2101</td><td class="negroCSS2">Proveedores</td><td class="negroCSS">7,457,646.17</td><td class="negroCSS">33.23 %</td><td class="negroCSS">7,455,576.30</td><td class="negroCSS">31.42 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2102</td><td class="negroCSS2">Cuentas por Pagar</td><td class="negroCSS">481,965.62</td><td class="negroCSS">2.15 %</td><td class="negroCSS">560,642.87</td><td class="negroCSS">2.36 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2103</td><td class="negroCSS2">Impuestos y Retenciones por Pagar</td><td class="negroCSS">7,116,303.67</td><td class="negroCSS">31.71 %</td><td class="negroCSS">7,891,102.65</td><td class="negroCSS">33.25 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2104</td><td class="negroCSS2">Gastos Acumulados por Pagar</td><td class="negroCSS">1,310,404.33</td><td class="negroCSS">5.84 %</td><td class="negroCSS">1,278,383.88</td><td class="negroCSS">5.39 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2105</td><td class="negroCSS2">Intereses por Pagar</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2107</td><td class="negroCSS2">Porción corriente de préstamo a largo plazo</td><td class="negroCSS">1,069,344.23</td><td class="negroCSS">4.76 %</td><td class="negroCSS">1,117,222.63</td><td class="negroCSS">4.71 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2"> </td><td class="negroCSS2"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="azulCSS2">22</td><td class="azulCSS2">TOTAL PASIVOS NO CORRIENTES</td><td class="azulCSS">5,007,296.98</td><td class="azulCSS">22.31 %</td><td class="azulCSS">5,426,972.67</td><td class="azulCSS">22.87 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2201</td><td class="negroCSS2">Prestamos por pagar a L/Plazo</td><td class="negroCSS">1,967,363.44</td><td class="negroCSS">8.77 %</td><td class="negroCSS">1,649,823.61</td><td class="negroCSS">6.95 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2202</td><td class="negroCSS2">Recibos de Compra Acumulados</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td><td class="negroCSS">0.00</td><td class="negroCSS">0.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">2203</td><td class="negroCSS2">Indemnizacion Largo Plazo</td><td class="negroCSS">3,039,933.54</td><td class="negroCSS">13.55 %</td><td class="negroCSS">3,777,149.06</td><td class="negroCSS">15.92 %</td>
</tr><tr class="GridviewScrollItem">
<td class="naranjaCSS2"> </td><td class="naranjaCSS2">TOTAL PASIVO</td><td class="naranjaCSS">22,442,961.00</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">23,729,901.00</td><td class="naranjaCSS">100.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2"> </td><td class="negroCSS2"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td><td class="negroCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">31</td><td class="negroCSS2">Patrimonio</td><td class="negroCSS">2,657,585.88</td><td class="negroCSS">9.49 %</td><td class="negroCSS">2,657,585.88</td><td class="negroCSS">7.69 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">32</td><td class="negroCSS2">Utilidades o Perdidas Acumuladas</td><td class="negroCSS">20,618,734.38</td><td class="negroCSS">73.59 %</td><td class="negroCSS">26,801,551.91</td><td class="negroCSS">77.59 %</td>
</tr><tr class="GridviewScrollItem">
<td class="negroCSS2">34</td><td class="negroCSS2">Utilidad o Perdida del Ejercicio</td><td class="negroCSS">4,741,189.80</td><td class="negroCSS">16.92 %</td><td class="negroCSS">5,084,933.46</td><td class="negroCSS">14.72 %</td>
</tr><tr class="GridviewScrollItem">
<td class="naranjaCSS2"> </td><td class="naranjaCSS2">TOTAL CAPITAL</td><td class="naranjaCSS">28,017,510.06</td><td class="naranjaCSS">100.00 %</td><td class="naranjaCSS">34,544,071.25</td><td class="naranjaCSS">100.00 %</td>
</tr><tr class="GridviewScrollItem">
<td class="naranjaCSS2"> </td><td class="naranjaCSS2">TOTAL PASIVO Y CAPITAL</td><td class="naranjaCSS">50,460,471.06</td><td class="naranjaCSS"> </td><td class="naranjaCSS">58,273,972.25</td><td class="naranjaCSS"> </td>
</tr><tr class="GridviewScrollItem">
<td class="whiteCSS"> </td><td class="whiteCSS"> </td><td class="whiteCSS"> </td><td class="whiteCSS">~</td><td class="whiteCSS"> </td><td class="whiteCSS">*</td>
</tr>
</table>
My main goal is that when clicking on a checkbox I have the option to hide or show the "%" column of the table. I have achieved this through a java script that works mostly fine.
My main inconvenience is how to format the colspan of the table since it is disassembled and everything looks wrong
JavaScript:
$(function () {
//tags.Add("~");
//tags.Add("*");
//tags.Add("@");
//tags.Add("?");
$("[id*=chkPer]").click(function () {
var isChecked = $(this).is(":checked");
var th = $("[id*=GVBalance] td:contains('~')");
th.css("display", isChecked ? "" : "none");
var i = 0;
$("[id*=GVBalance] tr").each(function () {
if (i != 0 && i != 1) {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
}
i++;
});
var th = $("[id*=GVBalance] td:contains('*')");
i = 0;
th.css("display", isChecked ? "" : "none");
$("[id*=GVBalance] tr").each(function () {
if (i != 0 && i != 1) {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
}
i++;
});
var th = $("[id*=GVBalance] td:contains('@')");
i = 0;
th.css("display", isChecked ? "" : "none");
$("[id*=GVBalance] tr").each(function () {
if (i != 0 && i != 1 ) {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
}
i++;
});
var th = $("[id*=GVBalance] td:contains('?')");
i = 0;
th.css("display", isChecked ? "" : "none");
$("[id*=GVBalance] tr").each(function () {
if (i != 0 && i != 1) {
$(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
}
i++;
});
});
});
This is what the original image looks like:
Good to not confuse them, at the end of the column there are labels: ~, *, @, ? , the columns with these labels are the ones that will be hidden. That's what the javascript code says.
In the end it looks like this, the colspan is screwed. Is it a good idea to reissue it? how to do it? Thank you.
change the function this selects the cells that contain the symbol % var td = $("td:contains('%')"); , and depending on the check it hides or shows them, also for the headers select those that use the FILACSS class and have the colspan=2 $(".FILACSS[colspan=2]") , if it finds elements it selects them and adds an attribute to be able to use it later, th.attr("data-title", "true"); , if depending on the check it sets the colspan to 1 or 2, in the event that it is set to 1, the selector $(".FILACSS[colspan=2]") does not work, so it searches with this other $(".FILACSS [data-title=true]"); , in the case of the general title it works similar