1

Tengo esta tabla que me muestra los datos en la misma línea:

Noticia1

Estoy intentando darle la forma que quiero pero no lo consigo. La idea es que me muestre los datos así:

Noticia

Los datos vienen del servidor mysql y creo la tabla así:

function construirListado(oXML) 
        {

        var oTabla = document.createElement("table");
        oTabla.border = "3";
        var oTHead = oTabla.createTHead();
        var oFila = oTHead.insertRow(-1);
        
        var oTH = document.createElement("TH");
        oTH.textContent = "IDNoticia";
        oFila.appendChild(oTH);
        
        oTH = document.createElement("TH");
        oTH.textContent = "Título";
        oFila.appendChild(oTH);

        oTH = document.createElement("TH");
        oTH.textContent = "Autor";
        oFila.appendChild(oTH);

        oTH = document.createElement("TH");
        oTH.textContent = "Fecha";
        oFila.appendChild(oTH);
                    
        oTH = document.createElement("TH");
        oTH.textContent = "Descripción";
        oFila.appendChild(oTH);
                    
        var oTBody = oTabla.createTBody();      
        var oPersonas = oXML.querySelectorAll("documento");
        for (var i = 0; i < oPersonas.length; i++) {
            oFila = oTBody.insertRow(-1);

            var oCelda = oFila.insertCell(-1);
            oCelda.textContent = oPersonas[i].querySelector("idnotici").textContent;

            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("titul").textContent);                            
        
            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("auto").textContent);

            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("fech").textContent);
            
            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("descripcio").textContent);
                            
        }
        document.querySelector("#listado").innerHTML = "";
        document.querySelector("#listado").appendChild(oTabla);
    
    }

Datos para crear la tabla en la base de datos:

    CREATE DATABASE  IF NOT EXISTS `BdNoticias` /*!40100 DEFAULT CHARACTER SET latin1 */; 
    USE `BdNoticias`;


DROP TABLE IF EXISTS `noticias`;
CREATE TABLE `noticias` (
  `idnoticia` varchar(9) NOT NULL,
  `titulo` varchar(20) NOT NULL,
  `descripcion` longtext NOT NULL,
  `autor` varchar(20) NOT NULL,
  `fecha` date NOT NULL,
  PRIMARY KEY (`idnoticia`)
);

INSERT INTO `noticias` (`idnoticia`, `titulo`, `descripcion`, `autor`, `fecha`) VALUES ('N1234', 'Los Campos', 'En el Bierzo, junto al rio Sil...', 'Victor', '2021-04-06'), ('N4321', 'Selva de Irati', 'En pleno Pirineo Navarro...', 'Eugenio', '2020-08-11');

Se que debe ser cambiando los "oTH = document.createElement("TH");" pero no lo consigo y me descuadra toda la tabla o me hace cosas raras. El resultado lo estoy desplegando en un div con id "listado" para mostrarlo.

Espero puedan ayudarme gracias.

Este el fichero .php getNoticias donde hago la consulta a la bd y creo el xml para gestionarlo en el .js:

    <?php

// Configuración BASE DE DATOS MYSQL
$servidor  = "localhost";
$basedatos = "BdNoticias";
$usuario   = "root";
$password  = "";

// Creamos la conexión al servidor.
$conexion = mysqli_connect($servidor, $usuario, $password,$basedatos) or die(mysqli_error($conexion));
mysqli_query($conexion,"utf8");

// Consulta SQL para obtener los datos de los centros.
$sql = "SELECT * FROM noticias";
$resultados = mysqli_query($conexion,$sql);

$XML ='<?xml version="1.0" encoding="UTF-8"?>';
$XML .='<datos>';

while ($fila = mysqli_fetch_array($resultados)) {
    $XML .='<documento>';
        $XML .='<idnotici>'.$fila["idnoticia"].'</idnotici>';
        $XML .='<titul>'.$fila["titulo"].'</titul>';
        $XML .='<descripcio>'.$fila["descripcion"].'</descripcio>';
        $XML .='<auto>'.$fila["autor"].'</auto>';
        $XML .='<fech>'.$fila["fecha"].'</fech>';
    $XML .='</documento>';
}

$XML .='</datos>';

// Cabecera de respuesta indicando que el contenido de la respuesta es XML
header("Content-Type: text/xml");
// Para que el navegador no haga cache de los datos devueltos por la página PHP.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

echo $XML;

mysqli_close($conexion);
?>
4
  • Por favor, edita la pregunta para agregar un ejemplo de los datos que intentas introducir en la tabla. No eres nuevo en SOes y ya deberías saber que se requiere información completa o, mejor aún, el código relevante para crear un ejemplo mínimo y verificable.
    – Triby
    el 21 jul. 2021 a las 15:57
  • perdón ya esta editado, no me deja poner mas código.
    – John Doe
    el 21 jul. 2021 a las 17:41
  • Lo que se necesita es un ejemplo del objeto oPersonas para tratar de recorrerlo. De cualquier forma, parece que quieres que la descripción aparezca en otra fila y sería suficiente con crearla y agregar la celda con un colspan para que ocupe todo el espacio.
    – Triby
    el 21 jul. 2021 a las 17:45
  • Vale acabo de editar
    – John Doe
    el 21 jul. 2021 a las 17:56

2 respuestas 2

0

Como te decía en comentarios, solo necesitas crear otra fila y combinar la celda para que ocupe toda la fila, basta con modificar el atributo .colspan. Por cierto, no debes crear columna para la descripción, porque va a quedar en fila independiente.

function construirListado(oXML) {
        var oTabla = document.createElement("table");
        oTabla.border = "3";
        var oTHead = oTabla.createTHead();
        var oFila = oTHead.insertRow(-1);
        
        var oTH = document.createElement("TH");
        oTH.textContent = "IDNoticia";
        oFila.appendChild(oTH);
        
        oTH = document.createElement("TH");
        oTH.textContent = "Título";
        oFila.appendChild(oTH);

        oTH = document.createElement("TH");
        oTH.textContent = "Autor";
        oFila.appendChild(oTH);

        oTH = document.createElement("TH");
        oTH.textContent = "Fecha";
        oFila.appendChild(oTH);

        /* ****** No es necesaria la columna para descripción
        oTH = document.createElement("TH");
        oTH.textContent = "Descripción";
        oFila.appendChild(oTH);
        */
                    
        var oTBody = oTabla.createTBody();      
        var oPersonas = oXML.querySelectorAll("documento");
        for (var i = 0; i < oPersonas.length; i++) {
            oFila = oTBody.insertRow(-1);

            var oCelda = oFila.insertCell(-1);
            oCelda.textContent = oPersonas[i].querySelector("idnotici").textContent;

            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("titul").textContent);                            
        
            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("auto").textContent);

            oCelda = oFila.insertCell(-1);
            oCelda.textContent = (oPersonas[i].querySelector("fech").textContent);
            
            // Crea una nueva fila para la descripción
            oFila = oTBody.insertRow(-1);
            oCelda = oFila.insertCell(-1);
            // Combina para ocupar toda la fila
            oCelda.colspan = 4;
            oCelda.textContent = (oPersonas[i].querySelector("descripcio").textContent);
                            
        }
        document.querySelector("#listado").innerHTML = "";
        document.querySelector("#listado").appendChild(oTabla);
    
}
1
  • Buenos días, me esta dando un error esta línea: "oFila = oTbody.insertRow(-1);" oTbody is not defined (donde se añade la descripcio) y el caso es que está definida más arriba. Estoy tratando de averiguar que pasa. Edito: Es oTBody, tenia la b en minúscula, ya funciona. Muchas gracias, tenía metido en la cabeza que había que hacerlo de otra manera, usando los tr,td y th.
    – John Doe
    el 22 jul. 2021 a las 9:36
0

Con menos código puedes generar la tabla desde PHP:

$xml = new SimpleXmlElement('<table/>');
$trh = $xml->addChild('tr'); // tr para encabezados
$i = -1; // Para detectar el primer renglón para encabezados
while ($fila = mysqli_fetch_array($resultados)) {
   $i++;
   $tr  = $xml->addChild('tr'); // Renglón para datos
   $tr2 = $xml->addChild('tr'); // Renglón para descripción
   foreach( $fila as $k => $v ){
      if( $i === 0 && $k !== 'descripcio' ) // Encabezados
         $trh->addChild('th', $k);
      if( $k === 'descripcio' )
         $tr2 = $xml->addChild('td', $v);
      else
         $tr->addChild('td', $v);
   }
}
echo $xml->asXml();
1
  • Muchas gracias, lo implantaré para tener un ejemplo de como hacerlo en php, tampoco sabía como hacerlo.
    – John Doe
    el 22 jul. 2021 a las 9:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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