Table standardization

Asked

Viewed 70 times

-2

In that table there are the description of 5 rounds, I would like to know how to define a specific round to put on the site, for example every time I open the page will always be in round 1, to go to the others I click with the arrow forward, but I would like to choose the round to start, I’d put it like a 3 and then I could go forward or come back with the arrows.

Another item would be css, because in each round the cells are of different sizes, I wanted them all to have the default size for all rounds.

javascript html css
  • 2

    I upvoted because you had 2 downvotes and no justification for it, which is ridiculous.

1 answer

1


To establish active round simply use the following code:

// Estabelece que que a rodada atual é a décima rodada
var inRodada = 10;
var $rodadas = $('.rodadas .rodada').removeClass('active');
// O -1 é necessário porque o vetor de rodadas começa em 0
$rodadas.eq(inRodadav - 1).addClass('active');

and to make all rounds have the same width just specify the width attribute in the TD and TH.

Update: Below is an example of how the tables would look with the fixed sizes.

$(document).ready(function() {

  // Estabelece que que a rodada atual é a décima rodada
  var inRodada = 2;
  var $rodadas = $('.rodadas .rodada').removeClass('active');
  // O -1 é necessário porque o vetor de rodadas começa em 0
  $rodadas.eq(inRodada - 1).addClass('active');

  
  $('.go').on('click', function(event) {
    event.preventDefault();

    var dir = parseInt($(this).data('go'));
    var $active = $('.rodadas .rodada.active');

    $('.wrapper .go').prop('disabled', false);

    if (dir == 1) {
      var $f = $active.next();
      $(this).prop('disabled', ($f.next().length == 0));
    } else {
      var $f = $active.prev();
      $(this).prop('disabled', ($f.prev().length == 0));
    }

    $active.removeClass('active');

    $f.addClass('active');

  });

});
<link href="http://files.saichorao.com.br/200000756-1d8ae1f3a7/rodadacss.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    <button class="prev random-button animate go" data-go="-1">Anterior</button>
    <span style="color:#ffffff;text-align: center" font="bold" class="title">TABELA</span>
    <button class="next random-button animate go" data-go="1">Próxima</button>
  </div>
  <div class="rodadas">
    <div class="rodada active" data-title="Rodada 1" id="rodada-1">
      <table border="1px" class="radius" style="width: 450px; margin: 0 auto;">
        <tbody>
          <tr>
            <th colspan="5" style="height: 23px; text-align: center;">1º RODADA</th>
          </tr>
          <tr>
            <td class="minhaTD" width="100">CASA</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="100">FORA</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 1</td>
            <td class="minhaTD" width="100">65,93</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">61,39</td>
            <td class="minhaTD" width="100">Teste 2</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 3</td>
            <td class="minhaTD" width="100">60,13</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">74,70</td>
            <td class="minhaTD" width="100">Teste 4</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 5</td>
            <td class="minhaTD" width="100">79,98</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">46,15</td>
            <td class="minhaTD" width="100">Teste 6</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 7</td>
            <td class="minhaTD" width="100">66,48</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">75,13</td>
            <td class="minhaTD" width="100">Teste 8</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 9</td>
            <td class="minhaTD" width="100">81,02</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">52,94</td>
            <td class="minhaTD" width="100">Teste 10</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 11</td>
            <td class="minhaTD" width="100">68,84</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">64,34</td>
            <td class="minhaTD" width="100">Teste 12</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 13</td>
            <td class="minhaTD" width="100">52,84</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">65,12</td>
            <td class="minhaTD" width="100">Teste 14</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 19</td>
            <td class="minhaTD" width="100">48,44</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">92,45</td>
            <td class="minhaTD" width="100">Teste 20</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 15</td>
            <td class="minhaTD" width="100">57,04</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">100,94</td>
            <td class="minhaTD" width="100">Teste 16</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 17</td>
            <td class="minhaTD" width="100">73,54</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">29,54</td>
            <td class="minhaTD" width="100">Teste 18</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="rodada" data-title="Rodada 2" id="rodada-2">
      <table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
        <tbody>
          <tr>
            <th colspan="5" style="height: 23px; text-align: center;">2º RODADA</th>
          </tr>
          <tr>
            <td class="minhaTD" width="100">CASA</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="100">FORA</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 16</td>
            <td class="minhaTD" width="100">63,69</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">29,32</td>
            <td class="minhaTD" width="100">Teste 18</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 2</td>
            <td class="minhaTD" width="100">57,24</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">42,02</td>
            <td class="minhaTD" width="100">Teste 4</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 11</td>
            <td class="minhaTD" width="100">57,89</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">65,26</td>
            <td class="minhaTD" width="100">Teste 5</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 12</td>
            <td class="minhaTD" width="100">56,39</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">32,29</td>
            <td class="minhaTD" width="100">Teste 15</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 17</td>
            <td class="minhaTD" width="100">83,39</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">44,19</td>
            <td class="minhaTD" width="100">Teste 13</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 10</td>
            <td class="minhaTD" width="100">47,34</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">79,52</td>
            <td class="minhaTD" width="100">Teste 19</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 14</td>
            <td class="minhaTD" width="100">84,79</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">55,86</td>
            <td class="minhaTD" width="100">Teste 1s</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 6</td>
            <td class="minhaTD" width="100">40,86</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">60,36</td>
            <td class="minhaTD" width="100">Teste 7</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 20</td>
            <td class="minhaTD" width="100">54,46</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">59,96</td>
            <td class="minhaTD" width="100">Teste 3</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 8</td>
            <td class="minhaTD" width="100">51,36</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">76,34</td>
            <td class="minhaTD" width="100">Teste 9</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="rodada" data-title="Rodada 3" id="rodada-3">
      <table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">

        <tbody>
          <tr>
            <th colspan="5" style="height: 23px; text-align: center;">3º RODADA</th>
          </tr>
          <tr>
            <td class="minhaTD" width="100">CASA</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="100">FORA</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 19</td>
            <td class="minhaTD" width="100">93,33</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">90,23</td>
            <td class="minhaTD" width="100">Teste 12</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 15</td>
            <td class="minhaTD" width="100">67,43</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">88,83</td>
            <td class="minhaTD" width="100">Teste 2</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 1</td>
            <td class="minhaTD" width="100">76,63</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">23,26</td>
            <td class="minhaTD" width="100">Teste 6</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 13</td>
            <td class="minhaTD" width="100">52,13</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">55,83</td>
            <td class="minhaTD" width="100">Teste 16</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 5</td>
            <td class="minhaTD" width="100">79,83</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">86,03</td>
            <td class="minhaTD" width="100">Teste 20</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 8</td>
            <td class="minhaTD" width="100">70,25</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">58,30</td>
            <td class="minhaTD" width="100">Teste 17</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 3</td>
            <td class="minhaTD" width="100">88,33</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">71,23</td>
            <td class="minhaTD" width="100">Teste 10</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 9</td>
            <td class="minhaTD" width="100">75,65</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">75,33</td>
            <td class="minhaTD" width="100">Teste 14</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 4</td>
            <td class="minhaTD" width="100">77,63</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">93,33</td>
            <td class="minhaTD" width="100">Teste 7</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 18</td>
            <td class="minhaTD" width="100">91,75</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">60,33</td>
            <td class="minhaTD" width="100">Teste 11</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="rodada" data-title="Rodada 4" id="rodada-4">
      <table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
        <tbody>
          <tr>
            <th colspan="5" style="height: 23px; text-align: center;">4º RODADA</th>
          </tr>
          <tr>
            <td class="minhaTD" width="100">CASA</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="100">FORA</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 12</td>
            <td class="minhaTD" width="100">19,31</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">26,22</td>
            <td class="minhaTD" width="100">Teste 10</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 20</td>
            <td class="minhaTD" width="100">14,09</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">17,27</td>
            <td class="minhaTD" width="100">Teste 15</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 6</td>
            <td class="minhaTD" width="100">41,44</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">24,29</td>
            <td class="minhaTD" width="100">Teste 18</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 11</td>
            <td class="minhaTD" width="100">25,01</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">24,50</td>
            <td class="minhaTD" width="100">Teste 17</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 16</td>
            <td class="minhaTD" width="100">30,51</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">11,92</td>
            <td class="minhaTD" width="100">Teste 19</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 4</td>
            <td class="minhaTD" width="100">31,21</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">63,08</td>
            <td class="minhaTD" width="100">Teste 8</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 7</td>
            <td class="minhaTD" width="100">43,97</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">34,38</td>
            <td class="minhaTD" width="100">Teste 9</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 2</td>
            <td class="minhaTD" width="100">20,31</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">38,00</td>
            <td class="minhaTD" width="100">Teste 13</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 1s</td>
            <td class="minhaTD" width="100">42,29</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">14,59</td>
            <td class="minhaTD" width="100">Teste 5</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 14</td>
            <td class="minhaTD" width="100">25,09</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">30,29</td>
            <td class="minhaTD" width="100">Teste 3</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="rodada" data-title="Rodada 5" id="rodada-5">
      <table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
        <tbody>
          <tr>
            <th colspan="5" style="height: 23px; text-align: center;">5º RODADA</th>
          </tr>
          <tr>
            <td class="minhaTD" width="100">CASA</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">PONTOS</td>
            <td class="minhaTD" width="100">FORA</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 17</td>
            <td class="minhaTD" width="100">84,86</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">54,24</td>
            <td class="minhaTD" width="100">Teste 1</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 19</td>
            <td class="minhaTD" width="100">43,36</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">64,46</td>
            <td class="minhaTD" width="100">Teste 11</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 5</td>
            <td class="minhaTD" width="100">67,36</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">72,06</td>
            <td class="minhaTD" width="100">Teste 13</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 3</td>
            <td class="minhaTD" width="100">46,10</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">39,37</td>
            <td class="minhaTD" width="100">Teste 6</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 7</td>
            <td class="minhaTD" width="100">49,44</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">84,46</td>
            <td class="minhaTD" width="100">Teste 12</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 16</td>
            <td class="minhaTD" width="100">60,46</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">45,47</td>
            <td class="minhaTD" width="100">Teste 20</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 18</td>
            <td class="minhaTD" width="100">51,80</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">48,20</td>
            <td class="minhaTD" width="100">Teste 15</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 10</td>
            <td class="minhaTD" width="100">45,85</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">36,70</td>
            <td class="minhaTD" width="100">Teste 8</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 2</td>
            <td class="minhaTD" width="100">68,56</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">60,15</td>
            <td class="minhaTD" width="100">Teste 14</td>
          </tr>
          <tr>
            <td class="minhaTD" width="100">Teste 9</td>
            <td class="minhaTD" width="100">57,94</td>
            <td class="minhaTD" width="50">X</td>
            <td class="minhaTD" width="100">54,84</td>
            <td class="minhaTD" width="100">Teste 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

  • Felipe, could you do it and post it? I am quite beginner and everything I do "kicking", sometimes right or not and these explanations of yours I do not know where to put.

  • Anyone else could help?

  • 1

    @Leandrosantosoliveira Your example went offline puts online again for kindness

  • Done... Online again!

  • 1

    Updated example

  • Thank you for your time in helping us... Now perfect! Imagine the happiness in seeing that everything worked out.

Show 1 more comment

Browser other questions tagged javascript html css

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