0

Amigos

Soy novato en el JavaScript, por favor podrían guiarme sobre cómo en este código que genera una tabla, agregar también estilos como un borde y un color. El código funciona y me genera una tabla con 3 campos, muchas gracias de antemano.

Saludos

mostrarEmpleados=function(){

let cmpTabla = document.getElementById("tablaEmpleados");
let contenidoTabla = "<table><tr>" +
    "<th>CEDULA</th>" +
    "<th>NOMBRE</th>" +
    "<th>APELLIDO</th>" +
    "<th>SUELDO</th>" +
    "</tr>";

let elementoEmpleados;
for (let i = 0; i < empleados.length; i++) {
    elementoEmpleados = empleados[i];
    contenidoTabla +=
        "<tr><td>" + elementoEmpleados.cedula + "</td>"
        + "<td>" + elementoEmpleados.nombre + "</td>"
        + "<td>" + elementoEmpleados.apellido + "</td>"
        + "<td>" + elementoEmpleados.sueldo + "</td>"
        + "</tr>"
}
contenidoTabla += "</table>";
cmpTabla.innerHTML = contenidoTabla;
1
  • Buen día, ¿Qué has intentado para agregar los estilos? ¿Qué errores te salen? el 6 sep. a las 1:46

2 respuestas 2

0

si lo que deseas es agregar estilos a cmpTabla podrías hacer algo como esto

cmpTabla.style.backgroundColor = 'yellow';
cmpTabla.style.borderColor = 'red';
cmpTabla.style.fontSize = '2rem';

Espero haberte ayudado.

1
  • Muchas gracias por la rápida respuesta
    – Fernando
    el 8 sep. a las 12:09
0

Cambia la linea que crea la tabla por esta otra para añadir un id a la tabla:

let contenidoTabla = "<table id=\"tabla_empleados\"><tr>" +

Luego añade el css que necesites en el fichero HTML, cuando salga la tabla tendrá los estilos.

#tabla_empleados{
  border-collapse: collapse;
  border: 2px solid black;
}

#tabla_empleados th{
  border: 2px solid black;
  font-size: 20px;
  padding: 5px;
}

#tabla_empleados td{
  border: 2px solid black;
  text-align: center;
}

#tabla_empleados tr:nth-child(even) {
  background-color: red;
}

let cmpTabla = document.getElementById("tablaEmpleados");
let contenidoTabla = `<table id="tabla_empleados"><tr>
    <th>CEDULA</th>
    <th>NOMBRE</th>
    <th>APELLIDO</th>
    <th>SUELDO</th>
    </tr>`

let elementoEmpleados;
for (let i = 0; i < 5; i++) {
    contenidoTabla +=
        `<tr>
        <td> cedula ${i + 1}</td>
        <td>nombre ${i + 1}</td>
        <td>apellido ${i + 1}</td>
        <td>sueldo ${i + 1}</td>
        </tr>`
}
contenidoTabla += `</table>`;
cmpTabla.innerHTML = contenidoTabla;
#tabla_empleados{
  border-collapse: collapse;
  border: 2px solid black;
}

#tabla_empleados th{
  border: 2px solid black;
  font-size: 20px;
  padding: 5px;
}

#tabla_empleados td{
  border: 2px solid black;
  text-align: center;
}

#tabla_empleados tr:nth-child(even) {
  background-color: red;
}
<div id="tablaEmpleados"></div>

Te dejo un ejemplo con tu código para que lo veas, recuerda que he cambiado el For para que saque datos de prueba

1
  • Muchas gracias por tu apoyo
    – Fernando
    el 8 sep. a las 12:10

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.