Tengo esta tabla que me muestra los datos en la misma línea:
Estoy intentando darle la forma que quiero pero no lo consigo. La idea es que me muestre los datos así:
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);
?>
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 uncolspan
para que ocupe todo el espacio.