0

Tengo los siguientes códigos HTML

document.write('<p>Estadisticas centro medico ñuñoa</p>');
let obj = {
   Radiologia: [
        {
             HORA: "11:00",
             ESPECIALISTA: "IGNACIO SCHULZ",
             PACIENTE: "FRANCISCA ROJAS",
             RUT: "9878782-1",
             PREVISION: "FONASA"
        },
        {
            HORA: "11:30",
            ESPECIALISTA: "FEDERICO SUBERCASEAUX",
            PACIENTE: "PAMELA ESTRADA",
            RUT: "15345241-3",
            PREVISION: "ISAPRE"
        },
        {
            HORA: "15:00",
            ESPECIALISTA: "FERNANDO WURTHZ",
            PACIENTE: "ARMANDO LUNA",
            RUT: "16445345-9",
            PREVISION: "ISAPRE"
        },
        {
            HORA: "15:30",
            ESPECIALISTA: "ANA MARIA GODOY",
            PACIENTE: "MANUEL GODOY",
            RUT: "17666419-0",
            PREVISION: "FONASA"
        },
        {
            HORA: "16:00",
            ESPECIALISTA: "PATRICIA SUAZO",
            PACIENTE: "RAMON ULLOA",
            RUT: "14989389-K",
            PREVISION: "FONASA"
        }
    ],
  }

function rellenarTabla(obj) {
  let tbody = document.getElementById('mTableBody');
  obj.Radiologia.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarTabla(obj);
let objUno = {
Traumatologia: [
  {
      HORA: "8:00",
      ESPECIALISTA: "MARIA PAZ ALTUZARRA",
      PACIENTE: "PAULA SANCHEZ",
      RUT: "15554774-5",
      PREVISION: "FONASA"
  },
  {
      HORA: "10:00",
      ESPECIALISTA: "RAUL ARAYA",
      PACIENTE: "ANGÉLICA NAVAS",
      RUT: "15444147-9",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "10:30",
      ESPECIALISTA: "MARIA ARRIAGADA",
      PACIENTE: "ANA KLAPP",
      RUT: "17879423-9",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:00",
      ESPECIALISTA: "ALEJANDRO BADILLA",
      PACIENTE: "FELIPE MARDONES",
      RUT: "1547423-6",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:30",
      ESPECIALISTA: "CECILIA BUDNIK",
      PACIENTE: "DIEGO MARRE",
      RUT: "16554741-K",
      PREVISION: "FONASA"
  },
  {
      HORA: "12:00",
      ESPECIALISTA: "ARTURO CAVAGNARO",
      PACIENTE: "CECILIA MENDEZ",
      RUT: "9747535-8",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "12:30",
      ESPECIALISTA: "ANDRES KANACRI",
      PACIENTE: "MARCIAL SUAZO",
      RUT: "11254785-5",
      PREVISION: "ISAPRE"
  }
],
}
function rellenarTraumat(objUno) {
  let tbody = document.getElementById('TableTraumatologia');
  objUno.Traumatologia.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarTraumat(objUno);


let objDos = {
Dental: [
  {
      HORA: "8:30",
      ESPECIALISTA: "ANDREA ZUÑIGA",
      PACIENTE: "MARCELA RETAMAL",
      RUT: "11123425-6",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:00",
      ESPECIALISTA: "MARIA PIA ZAÑARTU",
      PACIENTE: "ANGEL MUÑOZ",
      RUT: "9878789-2",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:30",
      ESPECIALISTA: "SCARLETT WITTING",
      PACIENTE: "MARIO KAST",
      RUT: "7998789-5",
      PREVISION: "FONASA"
  },
  {
      HORA: "13:00",
      ESPECIALISTA: "FRANCISCO VON TEUBER",
      PACIENTE: "KARIN FERNANDEZ",
      RUT: "18887662-K",
      PREVISION: "FONASA"
  },
  {
      HORA: "13:30",
      ESPECIALISTA: "EDUARDO VIÑUELA",
      PACIENTE: "HUGO SANCHEZ",
      RUT: "17665461-4",
      PREVISION: "FONASA"
  },
  {
      HORA: "14:00",
      ESPECIALISTA: "RAQUEL VILLASECA",
      PACIENTE: "ANA SEPULVEDA",
      RUT: "14441281-0",
      PREVISION: "ISAPRE"
  }
]
}
function rellenarDental(objDos) {
  let tbody = document.getElementById('TableDental');
  objDos.Dental.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarDental(objDos);

x=obj.Radiologia[0].PACIENTE;
y=obj.Radiologia[0].PREVISION;
console.log(x +"-" +y);

ultimopac=obj.Radiologia[4].PACIENTE;
ultimoprev=obj.Radiologia[4].PREVISION;
console.log(ultimopac +"-" +ultimoprev);

a=objUno.Traumatologia[0].PACIENTE;
b=objUno.Traumatologia[0].PREVISION;
console.log(a +"-" +b);

finalpac=objUno.Traumatologia[6].PACIENTE;
finalprev=objUno.Traumatologia[6].PREVISION;
console.log(finalpac +"-" +finalprev);

d=objDos.Dental[0].PACIENTE;
e=objDos.Dental[0].PREVISION;
console.log(d +"-" +e);

terminopac=objDos.Dental[5].PACIENTE;
terminoprev=objDos.Dental[5].PREVISION;
console.log(terminopac +"-" +terminoprev);

document.querySelector(".infoR").innerHTML = x +"-" +y;
table {
    color: black;
    margin-bottom: 20px;
    width: 50%;
}
.consulta{
    margin:0 auto;
    
}
.container {
    display: flex;
    margin-top: 30px;
    justify-content: center;
}
.infoR{
    display: block;
}
<body>
    <div class="container">
        <div>
    <table border="1" class="consulta">
        <thead class="tituloCrear2b">
            <tr>
                <th id="fechaI">Hora</th>
                <th id="fechaCa">Especialidad</th>
                <th id="resultado">Paciente</th>
                <th id="anotacion">Rut</th>         
                <th id="anotacion">Previsión</th>                                        
            </tr>
        </thead>
        <tbody id="mTableBody">
        </tbody>
        <div class="infoR">eee</div></table>
    </div>
    
    
    <div>
        <table border="1" class="consulta">
            <thead class="tituloCrear2b">
                <tr>
                    <th id="fechaI">Hora</th>
                    <th id="fechaCa">Especialidad</th>
                    <th id="resultado">Paciente</th>
                    <th id="anotacion">Rut</th>         
                    <th id="anotacion">Previsión</th>                                        
                </tr>
            </thead>
            <tbody id="TableTraumatologia">
            </tbody>
            </table>
        </div>
        <div class="infoT"></div>
        <div>
            <table border="1" class="consulta">
                <thead class="tituloCrear2b">
                    <tr>
                        <th id="fechaI">Hora</th>
                        <th id="fechaCa">Especialidad</th>
                        <th id="resultado">Paciente</th>
                        <th id="anotacion">Rut</th>         
                        <th id="anotacion">Previsión</th>                                        
                    </tr>
                </thead>
                <tbody id="TableDental">
                </tbody>
                </table>
            </div>
            <div class="infoD"></div>
        <script src="arreglos.js"></script>
    </div>
    
</body>

Este código está destinado a llenar unas tablas en html usando un archivo jason , el archivo jason se encuentra dentro del archivo de javascript. Lo he recorrido sin dificultad en javascript, ante lo que requiero orientación en el css para que se pueda ver de la forma requerida. Necesito codigo css para que el título estadísticas centro medico de ñuñoa quede al centro y sobre las tablas. También requiero que el nombre Francisca Rojas - Fonasa se escriba bajo la primera tabla . Después colocaré otros nombres bajo la segunda y la tercera tabla

1 respuesta 1

0

Ten en cuenta que HTML muestra las etiquetas en orden, por lo que si quieres poner algo por encima de otra cosa (sin usar position:fixed), lo mejor es literalmente poner la etiqueta por encima. Hacer el document.write() va a hacerse más tarde que toda la carga de la página porque lo último que haces es cargar el script, por lo que te lo pone en la punta de abajo. Mejor poner directamente una etiqueta <p> o similares en HTML. Lo mismo para poner el nombre debajo de la tabla: no lo colocas en la tabla sino debajo suya. Aquí la solución que entendí que necesitas:

let obj = {
   Radiologia: [
        {
             HORA: "11:00",
             ESPECIALISTA: "IGNACIO SCHULZ",
             PACIENTE: "FRANCISCA ROJAS",
             RUT: "9878782-1",
             PREVISION: "FONASA"
        },
        {
            HORA: "11:30",
            ESPECIALISTA: "FEDERICO SUBERCASEAUX",
            PACIENTE: "PAMELA ESTRADA",
            RUT: "15345241-3",
            PREVISION: "ISAPRE"
        },
        {
            HORA: "15:00",
            ESPECIALISTA: "FERNANDO WURTHZ",
            PACIENTE: "ARMANDO LUNA",
            RUT: "16445345-9",
            PREVISION: "ISAPRE"
        },
        {
            HORA: "15:30",
            ESPECIALISTA: "ANA MARIA GODOY",
            PACIENTE: "MANUEL GODOY",
            RUT: "17666419-0",
            PREVISION: "FONASA"
        },
        {
            HORA: "16:00",
            ESPECIALISTA: "PATRICIA SUAZO",
            PACIENTE: "RAMON ULLOA",
            RUT: "14989389-K",
            PREVISION: "FONASA"
        }
    ],
  }

function rellenarTabla(obj) {
  let tbody = document.getElementById('mTableBody');
  obj.Radiologia.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarTabla(obj);
let objUno = {
Traumatologia: [
  {
      HORA: "8:00",
      ESPECIALISTA: "MARIA PAZ ALTUZARRA",
      PACIENTE: "PAULA SANCHEZ",
      RUT: "15554774-5",
      PREVISION: "FONASA"
  },
  {
      HORA: "10:00",
      ESPECIALISTA: "RAUL ARAYA",
      PACIENTE: "ANGÉLICA NAVAS",
      RUT: "15444147-9",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "10:30",
      ESPECIALISTA: "MARIA ARRIAGADA",
      PACIENTE: "ANA KLAPP",
      RUT: "17879423-9",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:00",
      ESPECIALISTA: "ALEJANDRO BADILLA",
      PACIENTE: "FELIPE MARDONES",
      RUT: "1547423-6",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:30",
      ESPECIALISTA: "CECILIA BUDNIK",
      PACIENTE: "DIEGO MARRE",
      RUT: "16554741-K",
      PREVISION: "FONASA"
  },
  {
      HORA: "12:00",
      ESPECIALISTA: "ARTURO CAVAGNARO",
      PACIENTE: "CECILIA MENDEZ",
      RUT: "9747535-8",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "12:30",
      ESPECIALISTA: "ANDRES KANACRI",
      PACIENTE: "MARCIAL SUAZO",
      RUT: "11254785-5",
      PREVISION: "ISAPRE"
  }
],
}
function rellenarTraumat(objUno) {
  let tbody = document.getElementById('TableTraumatologia');
  objUno.Traumatologia.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarTraumat(objUno);


let objDos = {
Dental: [
  {
      HORA: "8:30",
      ESPECIALISTA: "ANDREA ZUÑIGA",
      PACIENTE: "MARCELA RETAMAL",
      RUT: "11123425-6",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:00",
      ESPECIALISTA: "MARIA PIA ZAÑARTU",
      PACIENTE: "ANGEL MUÑOZ",
      RUT: "9878789-2",
      PREVISION: "ISAPRE"
  },
  {
      HORA: "11:30",
      ESPECIALISTA: "SCARLETT WITTING",
      PACIENTE: "MARIO KAST",
      RUT: "7998789-5",
      PREVISION: "FONASA"
  },
  {
      HORA: "13:00",
      ESPECIALISTA: "FRANCISCO VON TEUBER",
      PACIENTE: "KARIN FERNANDEZ",
      RUT: "18887662-K",
      PREVISION: "FONASA"
  },
  {
      HORA: "13:30",
      ESPECIALISTA: "EDUARDO VIÑUELA",
      PACIENTE: "HUGO SANCHEZ",
      RUT: "17665461-4",
      PREVISION: "FONASA"
  },
  {
      HORA: "14:00",
      ESPECIALISTA: "RAQUEL VILLASECA",
      PACIENTE: "ANA SEPULVEDA",
      RUT: "14441281-0",
      PREVISION: "ISAPRE"
  }
]
}
function rellenarDental(objDos) {
  let tbody = document.getElementById('TableDental');
  objDos.Dental.forEach((c) => {
      let filaNueva = '<tr>' +
                        '<td>' + c.HORA + '</td>' +
                        '<td>' + c.ESPECIALISTA + '</td>' +
                        '<td>' + c.PACIENTE + '</td>' +
                        '<td>' + c.RUT + '</td>' +
                        '<td>' + c.PREVISION + '</td>' +
                      '</tr>';
    tbody.innerHTML += filaNueva;

    
  });
  
 
  
}
rellenarDental(objDos);

x=obj.Radiologia[0].PACIENTE;
y=obj.Radiologia[0].PREVISION;
console.log(x +"-" +y);

ultimopac=obj.Radiologia[4].PACIENTE;
ultimoprev=obj.Radiologia[4].PREVISION;
console.log(ultimopac +"-" +ultimoprev);

a=objUno.Traumatologia[0].PACIENTE;
b=objUno.Traumatologia[0].PREVISION;
console.log(a +"-" +b);

finalpac=objUno.Traumatologia[6].PACIENTE;
finalprev=objUno.Traumatologia[6].PREVISION;
console.log(finalpac +"-" +finalprev);

d=objDos.Dental[0].PACIENTE;
e=objDos.Dental[0].PREVISION;
console.log(d +"-" +e);

terminopac=objDos.Dental[5].PACIENTE;
terminoprev=objDos.Dental[5].PREVISION;
console.log(terminopac +"-" +terminoprev);

document.querySelector(".infoR").innerHTML = x +"-" +y;
.stats {
    text-align:center;
}
table {
    color: black;
    margin-bottom: 20px;
    width: 50%;
}
.consulta{
    margin:0 auto;
    
}
.container {
    display: flex;
    margin-top: 30px;
    justify-content: center;
}
.infoR{
    display: block;
}
<body>
    <div class="stats"><p>Estadisticas centro medico ñuñoa</p></div>
   <div class="container">
    <div>
<table border="1" class="consulta">
    <thead class="tituloCrear2b">
        <tr>
            <th id="fechaI">Hora</th>
            <th id="fechaCa">Especialidad</th>
            <th id="resultado">Paciente</th>
            <th id="anotacion">Rut</th>         
            <th id="anotacion">Previsión</th>                                        
        </tr>
    </thead>
    <tbody id="mTableBody">
    </tbody>
    </table>
    <div class="infoR">eee</div>
</div>
    
    <div>
        <table border="1" class="consulta">
            <thead class="tituloCrear2b">
                <tr>
                    <th id="fechaI">Hora</th>
                    <th id="fechaCa">Especialidad</th>
                    <th id="resultado">Paciente</th>
                    <th id="anotacion">Rut</th>         
                    <th id="anotacion">Previsión</th>                                        
                </tr>
            </thead>
            <tbody id="TableTraumatologia">
            </tbody>
            </table>
        </div>
        <div class="infoT"></div>
        <div>
            <table border="1" class="consulta">
                <thead class="tituloCrear2b">
                    <tr>
                        <th id="fechaI">Hora</th>
                        <th id="fechaCa">Especialidad</th>
                        <th id="resultado">Paciente</th>
                        <th id="anotacion">Rut</th>         
                        <th id="anotacion">Previsión</th>                                        
                    </tr>
                </thead>
                <tbody id="TableDental">
                </tbody>
                </table>
            </div>
            <div class="infoD"></div>
        </table>
        <script src="arreglos.js"></script>
    </div>
    
</body>

Saludos.

1
  • Ok. Gracias por tu respuesta, ha resultado muy útil.
    – Pedro
    el 30 may. 2021 a las 1: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.