1

estoy intentando crear un arreglo en el cual coloco nombres de equipos, y con el botón "Mostrar Tabla" me los muestra a los equipos que coloque en el array. También esta el botón "Generar Cambios", en el cual quiero colocar a 2 equipos en la columna "Equipo 1" y el otro en la columna "Equipo 2", cuando le das a generar cambios los coloca de forma al azar, pero lo que no puedo lograr es que me coloque bien los elementos en la columna. Como puedo hacer para que me coloque 2 equipos en la columna "EQUIPO 1" y otros 2 equipos en la columna "EQUIPO 2", por que me esta colocando 3 equipos en la columna 1, y queda solamente un equipo en la columna 2. He estado viendo pero no encuentro como hacerlo con el array y un for.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">

            </div>
            <div class="col-sm-6">
               <div id="tabla-clasificacion"></div>
               <table class="table">
                  
                   <thead>
                       <tr>
                           <th>Equipos</th>
                           <th>Puntos</th>
                       </tr>
                       <tbody id="equipos-tabla">
                      
                       </tbody>
                   </thead>
               </table>

               <button id="mostrar-tabla">Mostrar Tabla</button>
               <button id="cambio-nombres">Generar Equipos</button>
               <table class="table">
                <thead>
                    <tr>
                        <th>Team 1</th>
                        <th>Team 2</th>
                    </tr>
                    <tbody id="pText">
                   
                    </tbody>
                </thead>
            </table>
               <div></div> 
            </div>
        </div>
    </div>
   

    <script src="js/cargarTabla.js"></script>
</body>
</html>

var tabla = [
{nombre: "Real Madrid"},
{nombre: "Barcelona"},
{nombre: "Villareal"},
{nombre: "Union Deportiva"},

];
var j,x,i;
window.onload = cargarEventos;
function cargarEventos(){
    document.getElementById("mostrar-tabla").addEventListener("click", mostrarTabla, false);
    document.getElementById("cambio-nombres").addEventListener("click",cambiarNombres,false);
}  
function mostrarTabla(){
  var cuerpoTabla = document.getElementById("equipos-tabla");
  var tablaLlena = "";
  for (var i =0; i< tabla.length; i++){
      tablaLlena += "<tr><td>"+ tabla[i].nombre;
     

 
}

    cuerpoTabla.innerHTML = tablaLlena;
}

function cambiarNombres (tablaLlena) {
for (i= tabla.length -1; i>0; i--) {
    j = Math.floor(Math.random()*(i+1));
    x=tabla[i].nombre;
    tabla[i].nombre=tabla[j].nombre;
    tabla[j].nombre=x;
    
    }

    var pval ="";
    for (i=0; i<2; i++) {
        pval += "<tr><td>"+ tabla[i].nombre;
    }

    for (i=2; i<4; i++) {
        pval +=  "</td><td>"+tabla[i].nombre+"</td></tr>"; //Creo que aca esta el problema pero no se que forma colocar los elementos de la tabla de forma correcta.
    }

    document.getElementById('pText').innerHTML=pval;

}

1 respuesta 1

1

Parte del texto generado no generaba correctamente las filas de la tabla, en particular:

pval += "<td>"+ tabla[i].nombre+ "</td>";  // faltaba cerrar la celda con </td>

Aparte de eso, es mejor dejar fuera del for la generacion de las filas <tr></tr> ya que no deberian repetirse :

var tabla = [
{nombre: "Real Madrid"},
{nombre: "Barcelona"},
{nombre: "Villareal"},
{nombre: "Union Deportiva"},

];
var j,x,i;
window.onload = cargarEventos;
function cargarEventos(){
    document.getElementById("mostrar-tabla").addEventListener("click", mostrarTabla, false);
    document.getElementById("cambio-nombres").addEventListener("click",cambiarNombres,false);
}  
function mostrarTabla(){
  var cuerpoTabla = document.getElementById("equipos-tabla");
  var tablaLlena = "";
  for (var i =0; i< tabla.length; i++){
      tablaLlena += "<tr><td>"+ tabla[i].nombre;
     

 
}

    cuerpoTabla.innerHTML = tablaLlena;
}

function cambiarNombres (tablaLlena) {
for (i= tabla.length -1; i>0; i--) {
    j = Math.floor(Math.random()*(i+1));
    x=tabla[i].nombre;
    tabla[i].nombre=tabla[j].nombre;
    tabla[j].nombre=x;
    
    }

    var pval ="<tr>";
    for (i=0; i<2; i++) {
        pval += "<td>"+ tabla[i].nombre+ "</td>";
    }
    pval+="</tr><tr>";
    for (i=2; i<4; i++) {
        pval +=  "</td><td>"+tabla[i].nombre+"</td>"; //Creo que aca esta el problema pero no se que forma colocar los elementos de la tabla de forma correcta.
    }
    pval+="</tr>";

    document.getElementById('pText').innerHTML=pval;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">

            </div>
            <div class="col-sm-6">
               <div id="tabla-clasificacion"></div>
               <table class="table">
                  
                   <thead>
                       <tr>
                           <th>Equipos</th>
                           <th>Puntos</th>
                       </tr>
                       <tbody id="equipos-tabla">
                      
                       </tbody>
                   </thead>
               </table>

               <button id="mostrar-tabla">Mostrar Tabla</button>
               <button id="cambio-nombres">Generar Equipos</button>
               <table class="table">
                <thead>
                    <tr>
                        <th>Team 1</th>
                        <th>Team 2</th>
                    </tr>
                    <tbody id="pText">
                   
                    </tbody>
                </thead>
            </table>
               <div></div> 
            </div>
        </div>
    </div>
   

    <script src="js/cargarTabla.js"></script>
</body>
</html>

1
  • Quiero aclarar que si añado en este caso "10 elementos" me los ordena 2 en 2, y la idea es que los ordene 5 en una columna y 5 en otra columna, pero me parece extraño por que lo estoy haciendo segun la teoria de como se forman las tablas y no me da el resultado
    – Ketzell
    Commented el 23 sept. 2020 a las 16:19

Tu Respuesta

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

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