Добрый день. Подскажите, пожалуйста, как сделать, чтобы таблицы заменялись, а не заполняли страницу, выстраиваясь друг под другом. То есть необходимо, чтобы при нажатии на ссылку появлялась другая таблица, а у меня они появляются друг за другом.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
th, td { padding: 5px; }
</style>
</head>
<body>
<nav><a href="users">Users</a> | <a href="users2">Users2</a> | <a href="users3">Users3</a></nav>
<div id="content"></div>
<script>
const contentDiv = document.getElementById("content");
function loadContent(fileName){
const xhr = new XMLHttpRequest();
xhr.onload = () => {
if (xhr.status == 200) {
const xmlDoc = xhr.responseXML;
const table = createTable();
// выбираем все элементы user
const users = xmlDoc.getElementsByTagName("user");
for (let i = 0; i < users.length; i++) {
const user = users[i];
const userName = user.getAttribute("name");
const userAge = user.getAttribute("age");
const contact = user.querySelector("contacts email").textContent;
const row = createRow(userName, userAge, contact);
table.appendChild(row);
}
contentDiv.appendChild(table);
}
};
xhr.open("GET", fileName + ".xml");
xhr.responseType = "document";
xhr.setRequestHeader("Accept", "text/xml");
xhr.send();
}
// устанавливаем обработчик нажатия для кнопок
const links = document.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e)=>{
loadContent(links[i].getAttribute("href"));
e.preventDefault();
});
}
// по умолчанию загружаем компонент home
loadContent("users");
// создаем таблицу
function createTable() {
const table = document.createElement("table");
const headerRow = document.createElement("tr");
const nameColumnHeader = document.createElement("th");
const ageColumnHeader = document.createElement("th");
const contactColumnHeader = document.createElement("th");
nameColumnHeader.appendChild(document.createTextNode("Name"));
ageColumnHeader.appendChild(document.createTextNode("Age"));
contactColumnHeader.appendChild(document.createTextNode("Contacts"));
headerRow.appendChild(nameColumnHeader);
headerRow.appendChild(ageColumnHeader);
headerRow.appendChild(contactColumnHeader);
table.appendChild(headerRow);
return table;
}
// создаем одну строку для таблицы
function createRow(userName, userAge, userContact) {
const row = document.createElement("tr");
const nameColumn = document.createElement("td");
const ageColumn = document.createElement("td");
const contactColumn = document.createElement("td");
nameColumn.appendChild(document.createTextNode(userName));
ageColumn.appendChild(document.createTextNode(userAge));
contactColumn.appendChild(document.createTextNode(userContact));
row.appendChild(nameColumn);
row.appendChild(ageColumn);
row.appendChild(contactColumn);
return row;
}
</script>
</body>
</html>
import { createServer } from "http";
import { readFile } from "fs";
createServer((request, response)=>{
// получаем путь после слеша, слеш - первый символ в пути
let filePath = request.url.substring(1);
// если пустой путь, отправляем главную страницу index.html
if(!filePath) filePath = "index.html";
// в качестве типа ответа устанавливаем html
response.setHeader("Accept", "text/xml; charset=utf-8;");
readFile(filePath, (error, data)=>{
if(error){ // если ошибка
response.statusCode = 404;
response.end("<h1>Resourse not found!</h1>");
}
else{
response.end(data);
}
});
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));
