Tengo gridview de asp que el servidor me arroja con formato, el lado del cliente se ve de ésta manera
<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>
Mi principal objetivo es que al hacer click en un checkbox yo tenga la opción de ocultar o mostrar la columna de "%" de la tabla. Ésto lo he logrado a través de un java script que funciona en su mayoría bien.
Mi principal inconveniente como dar formato al colspan de la tabla ya que ésta se desarma y queda todo mal
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++;
});
});
});
Asi se ve la imagen original:
Bueno para no enredarlos, al final de la columna hay etiquetas: ~, *, @, ? , las columnas que lleven éstas etiquetas son las que serán escondidas. Eso es lo que dice el javascript code.
Al final se ve así, el colspan se jode. Es buena idea reeditarlo? como hacerlo? gracias.