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
    Commented el 21 jul. 2021 a las 15:57
  • perdón ya esta editado, no me deja poner mas código.
    – John Doe
    Commented 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
    Commented el 21 jul. 2021 a las 17:45
  • Vale acabo de editar
    – John Doe
    Commented 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
    Commented 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
    Commented el 22 jul. 2021 a las 9:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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