Change table with JavaScript

1

I have this Table , which uses JavaScript to pass or return a round; the problem that always starts in round 1, and to get in the current have to generate several clicks ... I wish it could start already in a predefined round, for example today we are in the 6th round.

HTML is too long to put here. In the background are n different tables. I leave an example below and a jsFiddle with everything: link

  <div class="rodadas">
    <div class="rodada active" data-title="Rodada 1" id="rodada-1">
        <table border="1px" class="modernTable withHeader" style="width: 661px;" width="710">
            <colgroup>
                <col>
                <col>
                <col span="6">
                <col>
                <col>
                <col>
            </colgroup>
            <tbody>
                <tr height="18">
                    <th colspan="5" style="height: 23px; width: 520px; text-align: center;">1º RODADA</th>
                </tr>
                <tr height="23">
                    <td height="23" style="height: 23px; text-align: center;"><strong>CASA</strong></td>
                    <td height="23" style="height: 23px; text-align: center;"><strong>PONTOS</strong></td>
                    <td height="23" style="height: 23px; text-align: center;"><strong>X</strong></td>
                    <td height="23" style="height: 23px; text-align: center;"><strong>PONTOS</strong></td>
                    <td height="23" style="height: 23px; text-align: center;"><strong>FORA</strong></td>
                </tr>
                <tr height="29">
                    <td style="height: 29px; white-space: nowrap; text-align: right;">Ewigen Sieben Ein<img alt="" src="http://files.saichorao.com.br/200000518-895258a4d7/EwigenSiebenEins.png" style="width: 40px; height: 40px;"></td>
                    <td style="text-align: center;">65,93</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">61,39</td>
                    <td><img alt="" src="http://files.saichorao.com.br/200000521-41c2d425c6/IceBlood.png" style="width: 40px; height: 40px;">Ice Blood</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">IZIDIOS FC<img alt="" src="http://files.saichorao.com.br/200000522-05cec06c88/IZIDIOSFC.png" style="width: 40px; height: 40px;"></td>
                    <td style="text-align: center;">60,13</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">74,70</td>
                    <td><img alt="" src="http://files.saichorao.com.br/200000520-e9b9deab5a/GordinhoBA.png" style="width: 40px; height: 40px;">Gordinho BA</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">JPHS<img alt="" src="http://files.saichorao.com.br/200000523-ad67fae61f/JPHS.png"style="width: 40px; height: 40px;"></td>
                    <td style="text-align: center;">79,98</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">46,15</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000639-53d2c550c4/saulovasco.png"width="40">saulovasco</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">Judão tst<img alt="" height="40" src="http://files.saichorao.com.br/200000632-6241f633e5/Judãotst.png" width="40"></td>
                    <td style="text-align: center;">66,48</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">75,13</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000634-c61d1c7178/PedraBrancaFC.png" width="40">Pedra Branca F C</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">RR Clube de Regatas<img alt="" height="40" src="http://files.saichorao.com.br/200000638-99cb89bbc5/RRClubedeRegatas.png" width="40"></td>
                    <td style="text-align: center;">81,02</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">52,94</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000641-b51dbb70e0/WLESFC.png"width="40">WLESFC</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">revelacao alema<img alt="" height="40" src="http://files.saichorao.com.br/200000637-e49cce6f01/revelacaoalema.png" width="40"></td>
                    <td style="text-align: center;">68,84</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">64,34</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000623-1298d148ca/Assizaooo3.png"width="40">Assizaooo3</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">DRAGÃO de Aracruz<img alt="" height="40" src="http://files.saichorao.com.br/200000625-7d2e67e2be/DRAGÃOdeAracruz.png" width="40"></td>
                    <td style="text-align: center;">52,84</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">65,12</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000633-17eef18ea7/LegendsAlfa.png" width="40">Legends Alfa</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">Renascitur FC<img alt="" height="40" src="http://files.saichorao.com.br/200000636-38236397a9/RenasciturFC.png" width="40"></td>
                    <td style="text-align: center;">48,44</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">92,45</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000622-57f1559e46/AserradobogodoF.C.png" width="40">Aserradobogodo F.C</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">Pó_de_arroz<img alt="" height="40" src="http://files.saichorao.com.br/200000635-80c4b82bc1/Pó_de_arroz.png"width="40"></td>
                    <td style="text-align: center;">57,04</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">100,94</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000624-c5741c767a/DemocraciaBahia.png" width="40">Democracia Bahia</td>
                </tr>
                <tr>
                    <td height="28" style="height: 28px; text-align: right;">semprevasco.1981<img alt="" height="40" src="http://files.saichorao.com.br/200000640-07a8c093ab/semprevasco.1981.png"width="40"></td>
                    <td style="text-align: center;">73,54</td>
                    <td style="text-align: center;">X</td>
                    <td style="text-align: center;">29,54</td>
                    <td><img alt="" height="40" src="http://files.saichorao.com.br/200000627-dcfa5deedd/Fitnss.png"width="40">Fitnss</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="rodada" data-title="Rodada 2" id="rodada-2">
        <table border="1px" class="modernTable withHeader" style="width: 661px;" width="710">
    
asked by anonymous 11.09.2015 / 17:26

1 answer

1

You need 2 things from me:

  • know how to tell the page which one to start
  • fetch this round and show it

To tell the page which show round you can use a querystring . For example:

teu.url/rodadas.html?3

and with JavaScript:

var inicio = location.search.slice(1);

You can go get that number 3 that I put in the example.

Then, having this number, just do:

$('.rodadas .active').removeClass('active');
$('.rodadas [id="' + 'rodada-' + inicio + '"]').addClass('active');

So it removes the active ones, looks for the ID the right round and makes it active.

    
13.09.2015 / 22:13