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;
}