Table hide show checkbox

Navigation
3

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>&nbsp;</td><td>&nbsp;</td><td class="FILACSS" colspan="4">COMPARATIVO ANUAL ABRIL</td>
                    </tr><tr class="GridviewScrollItem">
                        <td>&nbsp;</td><td>&nbsp;</td><td class="FILACSS" colspan="2">2015</td><td class="FILACSS" colspan="2">2016</td>
                    </tr><tr class="GridviewScrollItem">
                        <td>&nbsp;</td><td>&nbsp;</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&#243;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">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</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&#243;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&#243;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">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</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&#243;sitos en Garant&#237;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">&nbsp;</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">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</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&#243;n corriente de pr&#233;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">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</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">&nbsp;</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">&nbsp;</td><td class="negroCSS2">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</td><td class="negroCSS">&nbsp;</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">&nbsp;</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">&nbsp;</td><td class="naranjaCSS2">TOTAL PASIVO Y CAPITAL</td><td class="naranjaCSS">50,460,471.06</td><td class="naranjaCSS">&nbsp;</td><td class="naranjaCSS">58,273,972.25</td><td class="naranjaCSS">&nbsp;</td>
                    </tr><tr class="GridviewScrollItem">
                        <td class="whiteCSS">&nbsp;</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">~</td><td class="whiteCSS">&nbsp;</td><td class="whiteCSS">*</td>
                    </tr>
                </table>

My main objective is that when I click on a checkbox I have the option to hide or show the "%" column of the table. This I have achieved through a java script that works mostly well.

My main inconvenience is how to format the colspan of the table as it collapses and everything goes 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 how the original image looks:

Well so as not to entangle them, at the end of the column there are labels: ~, *, @,? , the columns that carry these labels are the ones that will be hidden. That's what the javascript code says.

At the end it looks like this, the colspan gets fucked. Is it a good idea to republish it? how to do it? thanks.

    
asked by N'oel C'alero 27.09.2016 в 20:09
source

1 answer

0

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, besides for the headers, select those that use the FILACSS class and have the colspan = 2 $ (". FILACSS [colspan = 2]") , if you find elements, select them and add an attribute to be used later , th.attr ("data-title", "true"); , if depending on the check it puts the colspan in 1 or in 2, in case it is in 1 the selector $ (". FILACSS [colspan = 2]") does not work for what you are looking for with this other $ (". FILACSS [data-title = true]"; , in the case of the general title works similar 

$(function() {
  $("[id*=chkPer]").click(function() {

    var isChecked = $(this).is(":checked");
    var td = $("td:contains('%')");
    var th = null;
    var th4 = null;
    if ($(".FILACSS[data-title=true]").length == 0)
    {
    th = $(".FILACSS[colspan=2]");
      th.attr("data-title", "true");
    }      
    else {
      th = $(".FILACSS[data-title=true]");
    }

    if ($(".FILACSS[colspan=4]").length == 0)
      th4 = $(".FILACSS[data-g-title=true]");
    else {
      th4 = $(".FILACSS[colspan=4]");
      th4.attr("data-g-title", "true");
    }

    th.attr("colspan", isChecked ? "2" : "1");
    th4.attr("colspan", isChecked ? "4" : "2");
    td.css("display", isChecked ? "" : "none");

  });
});
    
answered by 27.09.2016 / 23:24
source
Error sending Mail Cakephp 3.x I lose the reference in my Class with several constructors