Quería crear dinámicamente una tabla de empleados a partir de un conjunto de datos. Y quería descubrir cómo poner en negrita todos los nombres de departamentos o supervisores.
Aquí hay una muestra de mi código:
var data = [{"name": "John Smith", "primary": 1, "title": "CEO", "phone":123}, {"name":"Frank Beans", "title": "COO", "phone": 333}, {"name": "test", "title": " newemployee", "phone": 555}, {"name": "Damar", "primary": 1, "title": "supervisor of quality", "phone": 999}] function buildTable(data){ var table = document.getElementById('mytable') for(var i =0; i < data.length; i++){ var row = ` <tr> <td data-id="primary">${data[i].name}</td> <td>${data[i].title}</td> <td>${data[i].phone}</td> </tr>` table.innerHTML += row } }¡Puedo mostrar la tabla, lo cual es genial! Pero, cuando trato de poner en negrita la celda td que tiene nombre, pone en negrita todas las celdas de nombre. Me gustaría poner en negrita a John Smith y Damar, ya que John es el director general y Damar es supervisora. Estaba pensando en recorrer los datos y si tiene === 1 principal, entonces podría aplicar la negrita a la celda, pero no pude averiguar cómo hacerlo.
Podrías crear una clase
.bold-td { font-weight: 700; }luego verifique en un ciclo si la entrada actual tiene el conjunto primario en 1, si es así, agregue la clase al elemento td actual
for(var i = 0; i < data.length; i++){ var row = ` <tr> <td data-id="primary"`; if(data[i].primary === 1) row+= ` class="bold-td"`; row += `>${data[i].name}</td> <td>${data[i].title}</td> <td>${data[i].phone}</td> </tr>`; table.innerHTML += row; }