Change table with Javascript

Asked

Viewed 388 times

1

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

HTML is too long to put here. At the bottom are n different tables. I leave an example below and a jsFiddle with everything: http://jsfiddle.net/c2r0x6jn/

  <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/Ewigen Sieben Eins.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/Ice Blood.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/IZIDIOS FC.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/Gordinho BA.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ão tst.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/Pedra Branca F C.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/RR Clube de Regatas.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/revelacao alema.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ÃO de Aracruz.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/Legends Alfa.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/Renascitur FC.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/Aserradobogodo F. 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/Democracia Bahia.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">
javascript html
  • 4

    This HTML is generated on the server or is static?

  • Static... I update and save to the server.

  • I do not understand why it is not clear the question... There is this table... But every time someone accesses the same, always appears in round 1... I would like it to appear already in other rounds... Like the five... It does not need to be automatic... I can choose the round and then put on the site... So people could continue to go back the previous ones or pass on... I believe it was unfair the placement of the above colleagues... 'Cause it’s pretty clear.

  • 1

    Leandro I will take another look in a little while. If you explain by other word in the question is a good idea.

1 answer

1


You need two things in my eyes:

  • how to tell the page which round to start
  • go get that round and show it

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

teu.url/rodadas.html?3

and with Javascript:

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

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

Then, having that 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.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.