1

Quiero poner dos botones. Uno seria el botón SIGUIENTE y el otro el boton ANTERIOR que me muestren las diferentes tablas creadas y que cuando llegue al último no aparezca el botón SIGUIENTE. Del mismo modo cuando aparezca la primera tabla no aparezca el boton ANTERIOR.

Este código es para mostrar varias tablas al apretar algun botón

Código html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Copa mundial</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav id="menu">
      <ul>
        <li><a href="#">hola</a></li>
        <li><a href="#">todos</a></li>
        <li><a href="#">acordamos</a></li>
        <li><a href="#">algo</a></li>
      </ul>
    </nav>
    <div class="tablas">
      <div  class="contenedor anterior" style="order: -1;">
        <button id="anterior" onclick="pasarTablaA()">ANTERIOR</button>
      </div>
      <div id="centro" class="contenedor centro" style="order: 0;"></div>
      <div  class="contenedor siguiente" style="order: 1;">
        <button id="siguiente" onclick="pasarTablaS()">SIGUIENTE</button>
      </div>
    </div>
  <script src="/script.js"></script>
</body>
</html>

Código javascript

let grupo1 = [{
    nombre: 'AS. DEL SEÑOR',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: '3RA. ETAPA',
    jugados: 3,
    ganados: 4,
    empatados: 2,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'PLINIO MELENDEZ',
    jugados: 3,
    ganados: 1,
    empatados: 1,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 20',
    jugados: 3,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 8,
    golesc: 2,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SANJOSE',
    jugados: 3,
    ganados: 0,
    empatados: 9,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: '4TA. ETAPA',
    jugados: 3,
    ganados: 3,
    empatados: 4,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },] 
let grupo2 = [{
    nombre: 'FUENTE DE AMOR',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'LOS PINOS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'MONTE MATINEZ',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 7',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 9',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: '3 DE MAYO',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },]
let grupo3 = [{
    nombre: 'POZO DE JACOB',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 2',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 3',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SANTA MONICA',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'LAS AMERICAS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 6',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },]
let grupo4 = [{
    nombre: 'DIOS VIVIENTE',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 1',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'POLICIA NACIONAL',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'LOS NOGALES',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'LA COLORADA',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 4',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },]
let grupo5 = [{
    nombre: 'C. SIN FRONTERAS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    },
    {
    nombre: 'SECTOR 17',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function(){
        return this.golesf - this.golesc
    },
    puntos: function(){
        return this.ganados*3 + this.empatados*1
    }
    }]

    var s;
function comparar(a, g){
    function SortArray(x, y){
        if (x.puntos() < y.puntos()) {return 1;}
        if (x.puntos() > y.puntos()) {return -1;}
        if(x.diferencia() > y.diferencia()) {return -1;}
        if(x.diferencia() > y.diferencia()) {return 1;}
        
    }
    s = a.sort(SortArray);

    
    const headtable = ['', 'EQUIPOS', 'J', 'G', 'E', 'P', 'GF', 'GC', 'DF', 'PT']
    const divv = document.createElement('div')
    divv.className='contenido'
    const div1 = document.querySelector('.centro')
    const h1 = document.createElement('h1')
    h1.appendChild(document.createTextNode('Grupo '+g));
    h1.className='titulo tablaaa'
    divv.appendChild(h1)
    div1.appendChild(divv)
    h1.style.cssText='text-align: center;'
    const tabla = document.createElement('table')
    const thead = document.createElement('thead')
    const tbody = document.createElement('tbody')
    for (let i = 0; i < headtable.length; i++) {
        const th = document.createElement('th')
        th.textContent = headtable[i]
        thead.appendChild(th)
    }
    tabla.className="tablaa"
    var tr=[]
    for (var i = 0; i < s.length; i++){
        tr[i] = document.createElement('tr');   
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        var td4 = document.createElement('td');
        var td5 = document.createElement('td');
        var td6 = document.createElement('td');
        var td7 = document.createElement('td');
        var td8 = document.createElement('td');
        var td9 = document.createElement('td');
        var td0 = document.createElement('td');
        if (i==0 || i==1) {
            td2.className="pass"
            td3.className="pass"
            td4.className="pass"
            td5.className="pass"
            td6.className="pass"
            td7.className="pass"
            td8.className="pass"
            td9.className="pass"
            td0.className="pass"
        }
        td1.className="num"
        td1.appendChild(document.createTextNode(i+1));
        td2.appendChild(document.createTextNode(s[i].nombre));
        td3.appendChild(document.createTextNode(s[i].jugados));
        td4.appendChild(document.createTextNode(s[i].ganados));
        td5.appendChild(document.createTextNode(s[i].empatados));
        td6.appendChild(document.createTextNode(s[i].perdidos));
        td7.appendChild(document.createTextNode(s[i].golesf));
        td8.appendChild(document.createTextNode(s[i].golesc));
        td9.appendChild(document.createTextNode(s[i].diferencia()));
        td0.appendChild(document.createTextNode(s[i].puntos()));  
        tr[i].appendChild(td1);
        tr[i].appendChild(td2);
        tr[i].appendChild(td3);
        tr[i].appendChild(td4);
        tr[i].appendChild(td5);
        tr[i].appendChild(td6);
        tr[i].appendChild(td7);
        tr[i].appendChild(td8);
        tr[i].appendChild(td9);
        tr[i].appendChild(td0);
        tbody.appendChild(tr[i]);
    }
    divv.appendChild(tabla)
    tabla.appendChild(thead)
    tabla.appendChild(tbody)
    return g;
}

comparar(grupo1, 1)
var cont=0;
function pasarTablaS(){
    var div = document.querySelector('.centro')
    var tt = document.querySelector('.contenido')
    div.removeChild(tt)
    var s=document.querySelector('.siguiente')
    cont++
    if(cont==1){
        comparar(grupo2, 2)
    }else if(cont==2){
        comparar(grupo3, 3)
    }else if(cont==3){
        comparar(grupo4, 4)
    }else if(cont==4){
        s.style.cssText='visibility: hidden'
        comparar(grupo5, 5)
    }
    console.log('conts: '+cont)
}
function pasarTablaA(){
    var valor=cont;
    var div = document.querySelector('.centro')
    var tt = document.querySelector('.contenido')
    div.removeChild(tt)
    var s=document.querySelector('.anterior')
    if(cont==1){
        comparar(grupo2, 2)
    }else if(cont==2){
        comparar(grupo3, 3)
    }else if(cont==3){
        comparar(grupo4, 4)
    }else if(cont==4){
        comparar(grupo5, 5)
    }
    cont--
    console.log('conta: '+cont)
    return valor;
}

Imágenes

Imagen 1 Imagen 2

1 respuesta 1

1

Estas es mi aproximación a tu pregunta, a ver si te vale.

Cambios:

  1. En el HTML cambia esto:

    <div  class="contenedor anterior" style="order: -1;">
      <button id="anterior" onclick="pasarTablaA()">ANTERIOR</button>
    </div>
    <div id="centro" class="contenedor centro" style="order: 0;"></div>
    <div  class="contenedor siguiente" style="order: 1;">
      <button id="siguiente" onclick="pasarTablaS()">SIGUIENTE</button>
    </div>
    

    por esto:

    <div id="centro" class="contenedor centro"></div>
    <button id="anterior" class="anterior" style="display:none;" onclick="pasarTabla('A')">ANTERIOR</button>
    <button class="siguiente" id="siguiente" onclick="pasarTabla('S')">SIGUIENTE</button>
    
    
  2. En el javascript quita todo esto:

    comparar(grupo1, 1)
    var cont=0;
    function pasarTablaS(){
        var div = document.querySelector('.centro')
        var tt = document.querySelector('.contenido')
        div.removeChild(tt)
        var s=document.querySelector('.siguiente')
        cont++
        if(cont==1){
            comparar(grupo2, 2)
        }else if(cont==2){
            comparar(grupo3, 3)
        }else if(cont==3){
            comparar(grupo4, 4)
        }else if(cont==4){
            s.style.cssText='visibility: hidden'
            comparar(grupo5, 5)
        }
        console.log('conts: '+cont)
    }
    function pasarTablaA(){
        var valor=cont;
        var div = document.querySelector('.centro')
        var tt = document.querySelector('.contenido')
        div.removeChild(tt)
        var s=document.querySelector('.anterior')
        if(cont==1){
            comparar(grupo2, 2)
        }else if(cont==2){
            comparar(grupo3, 3)
        }else if(cont==3){
            comparar(grupo4, 4)
        }else if(cont==4){
            comparar(grupo5, 5)
        }
        cont--
        console.log('conta: '+cont)
        return valor;
    }
    

    y pon esto:

    var cont = 1;
    comparar(eval('grupo' + cont), cont)
    
    function pasarTabla(arg) {
      document.querySelector('.centro').removeChild(document.querySelector('.contenido'))
      var a = document.querySelector('.anterior')
      var s = document.querySelector('.siguiente')
      if(arg == 'S') {
        cont++
        if (cont < 5) {
          s.style.display = "inline"
          a.style.display = "inline"
        } else {
          s.style.display = "none"
          a.style.display = "inline"
        }
      } else {
        cont--
        if (cont > 1) {
          s.style.display = "inline"
          a.style.display = "inline"
        } else {
          s.style.display = "inline"
          a.style.display = "none"
        }
      }
      comparar(eval('grupo' + cont), cont)
    }
    

Si te funciona y te vale así lo dices y documento los cambios principales.

Aquí te dejo un snippet que puedes ejecutar para que veas que parece que funciona bien:

let grupo1 = [{
    nombre: 'AS. DEL SEÑOR',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: '3RA. ETAPA',
    jugados: 3,
    ganados: 4,
    empatados: 2,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'PLINIO MELENDEZ',
    jugados: 3,
    ganados: 1,
    empatados: 1,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 20',
    jugados: 3,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 8,
    golesc: 2,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SANJOSE',
    jugados: 3,
    ganados: 0,
    empatados: 9,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: '4TA. ETAPA',
    jugados: 3,
    ganados: 3,
    empatados: 4,
    perdidos: 3,
    golesf: 8,
    golesc: 10,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
]
let grupo2 = [{
    nombre: 'FUENTE DE AMOR',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'LOS PINOS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'MONTE MATINEZ',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 7',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 9',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: '3 DE MAYO',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
]
let grupo3 = [{
    nombre: 'POZO DE JACOB',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 2',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 3',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SANTA MONICA',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'LAS AMERICAS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 6',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
]
let grupo4 = [{
    nombre: 'DIOS VIVIENTE',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 1',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'POLICIA NACIONAL',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'LOS NOGALES',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'LA COLORADA',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 4',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
]
let grupo5 = [{
    nombre: 'C. SIN FRONTERAS',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  },
  {
    nombre: 'SECTOR 17',
    jugados: 5,
    ganados: 1,
    empatados: 9,
    perdidos: 3,
    golesf: 6,
    golesc: 3,
    diferencia: function() {
      return this.golesf - this.golesc
    },
    puntos: function() {
      return this.ganados * 3 + this.empatados * 1
    }
  }
]

var s;

function comparar(a, g) {
  function SortArray(x, y) {
    if (x.puntos() < y.puntos()) {
      return 1;
    }
    if (x.puntos() > y.puntos()) {
      return -1;
    }
    if (x.diferencia() > y.diferencia()) {
      return -1;
    }
    if (x.diferencia() > y.diferencia()) {
      return 1;
    }

  }
  s = a.sort(SortArray);


  const headtable = ['', 'EQUIPOS', 'J', 'G', 'E', 'P', 'GF', 'GC', 'DF', 'PT']
  const divv = document.createElement('div')
  divv.className = 'contenido'
  const div1 = document.querySelector('.centro')
  const h1 = document.createElement('h1')
  h1.appendChild(document.createTextNode('Grupo ' + g));
  h1.className = 'titulo tablaaa'
  divv.appendChild(h1)
  div1.appendChild(divv)
  h1.style.cssText = 'text-align: center;'
  const tabla = document.createElement('table')
  const thead = document.createElement('thead')
  const tbody = document.createElement('tbody')
  for (let i = 0; i < headtable.length; i++) {
    const th = document.createElement('th')
    th.textContent = headtable[i]
    thead.appendChild(th)
  }
  tabla.className = "tablaa"
  var tr = []
  for (var i = 0; i < s.length; i++) {
    tr[i] = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    var td4 = document.createElement('td');
    var td5 = document.createElement('td');
    var td6 = document.createElement('td');
    var td7 = document.createElement('td');
    var td8 = document.createElement('td');
    var td9 = document.createElement('td');
    var td0 = document.createElement('td');
    if (i == 0 || i == 1) {
      td2.className = "pass"
      td3.className = "pass"
      td4.className = "pass"
      td5.className = "pass"
      td6.className = "pass"
      td7.className = "pass"
      td8.className = "pass"
      td9.className = "pass"
      td0.className = "pass"
    }
    td1.className = "num"
    td1.appendChild(document.createTextNode(i + 1));
    td2.appendChild(document.createTextNode(s[i].nombre));
    td3.appendChild(document.createTextNode(s[i].jugados));
    td4.appendChild(document.createTextNode(s[i].ganados));
    td5.appendChild(document.createTextNode(s[i].empatados));
    td6.appendChild(document.createTextNode(s[i].perdidos));
    td7.appendChild(document.createTextNode(s[i].golesf));
    td8.appendChild(document.createTextNode(s[i].golesc));
    td9.appendChild(document.createTextNode(s[i].diferencia()));
    td0.appendChild(document.createTextNode(s[i].puntos()));
    tr[i].appendChild(td1);
    tr[i].appendChild(td2);
    tr[i].appendChild(td3);
    tr[i].appendChild(td4);
    tr[i].appendChild(td5);
    tr[i].appendChild(td6);
    tr[i].appendChild(td7);
    tr[i].appendChild(td8);
    tr[i].appendChild(td9);
    tr[i].appendChild(td0);
    tbody.appendChild(tr[i]);
  }
  divv.appendChild(tabla)
  tabla.appendChild(thead)
  tabla.appendChild(tbody)
  // return g;
}

var cont = 1;
comparar(eval('grupo' + cont), cont)

function pasarTabla(arg) {
  document.querySelector('.centro').removeChild(document.querySelector('.contenido'))
  var a = document.querySelector('.anterior')
  var s = document.querySelector('.siguiente')
  if(arg == 'S') {
    cont++
    if (cont < 5) {
      s.style.display = "inline"
      a.style.display = "inline"
    } else {
      s.style.display = "none"
      a.style.display = "inline"
    }
  } else {
    cont--
    if (cont > 1) {
      s.style.display = "inline"
      a.style.display = "inline"
    } else {
      s.style.display = "inline"
      a.style.display = "none"
    }
  }
  comparar(eval('grupo' + cont), cont)
}


function pasarTablaS() {
  document.querySelector('.centro').removeChild(document.querySelector('.contenido'))
  var a = document.querySelector('.anterior')
  var s = document.querySelector('.siguiente')
  cont++
  if (cont < 5) {
    s.style.display = "inline"
    a.style.display = "inline"
  } else {
    s.style.display = "none"
    a.style.display = "inline"
  }
  comparar(eval('grupo' + cont), cont)
}

function pasarTablaA() {
  document.querySelector('.centro').removeChild(document.querySelector('.contenido'))
  var a = document.querySelector('.anterior')
  var s = document.querySelector('.siguiente')
  cont--
  if (cont > 1) {
    s.style.display = "inline"
    a.style.display = "inline"
  } else {
    s.style.display = "inline"
    a.style.display = "none"
  }
  comparar(eval('grupo' + cont), cont)
}


function pasarTablaAkk() {
  document.querySelector('.centro').removeChild(document.querySelector('.contenido'))
  var a = document.querySelector('.anterior')
  var s = document.querySelector('.siguiente')
  if (cont == 0) {
    comparar(grupo1, 1)
    a.style.display = "none"
    s.style.display = "inline"
  } else if (cont == 1) {
    comparar(grupo2, 2)
    a.style.display = "none"
    s.style.display = "inline"
  } else if (cont == 2) {
    comparar(grupo3, 3)
    a.style.display = "inline"
    s.style.display = "inline"
  } else if (cont == 3) {
    comparar(grupo4, 4)
    a.style.display = "inline"
    s.style.display = "inline"
  } else if (cont == 4) {
    comparar(grupo5, 5)
    a.style.display = "inline"
    s.style.display = "inline"
  }
  cont--
  console.log('conta: ' + cont)
}
    <div class="tablas">
      <div id="centro" class="contenedor centro"></div>
        <button id="anterior" class="anterior" style="display:none;" onclick="pasarTabla('A')">ANTERIOR</button>
        <button class="siguiente" id="siguiente" onclick="pasarTabla('S')">SIGUIENTE</button>
    </div>

2
  • es así solo que los botones los quería al lado de la tabla
    – pipe
    el 5 ene. 2022 a las 14:11
  • @pipe: Ahora que me fijo en las imágenes veo que tienes razón. Aún así, como no pusistes la hoja de estilos CSS en la pregunta, la tabla no quedaba centrada ni con los colores de las imágenes. Supongo que no será un problema para tí corregir eso directamente en el HTML y/o CSS.
    – masterguru
    el 5 ene. 2022 a las 14:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.