【发布时间】：2023-01-25 15:20:20
【问题描述】：
我目前正在从事一个项目，我正在使用表格来显示数据。我注意到表格标题（HTML head 元素）即“th”在浏览器中呈现表格时没有显示。我仔细检查了我的 HTML 代码，可以确认 head 元素存在且结构正确，但由于某种原因，它们没有显示在表格中。我正在寻找有关如何解决此问题并确定问题原因的解决方案。任何帮助或指导将不胜感激。
<html>
<head></head>
<body>
<table id="exchange-rate">
<tr>
<th>AED</th>
<th>NPR</th>
</tr>
</table>
<div id="pagination-controls">
<div id="numeric-pagination">
<button class="page-button" id="page-1" onclick="renderPage(1)">1</button>
</div>
</div>
<script>
const API_URL = "https://api.fastforex.io/fetch-one?from=AED&to=NPR&api_key=xxxxxx-xxxx-xxxx";
const PAGE_SIZE = 50;
let exchangeRates = [];
// Fetch exchange rate data from the API
fetch(API_URL)
.then(response => response.json())
.then(data => {
// Extract the exchange rate from the response data
const rate = data.result.NPR;
// Generate the exchange rate data for AED values from 1 to 100
for (let i = 1; i <= 100; i++) {
exchangeRates.push({
aed: i,
npr: (rate * i).toFixed(2)
});
}
// Generate the exchange rate data for AED values from 100 to 900 in hundreds
for (let i = 100; i <= 900; i += 100) {
exchangeRates.push({
aed: i,
npr: (rate * i).toFixed(2)
});
}
// Generate the exchange rate data for AED values from 1000 to 10000 in thousands
for (let i = 1000; i <= 10000; i += 1000) {
exchangeRates.push({
aed: i,
npr: (rate * i).toFixed(2)
});
}
// Generate the numeric pagination buttons
const NUM_PAGES = Math.ceil(exchangeRates.length / PAGE_SIZE);
const numericPagination = document.getElementById("numeric-pagination");
for (let i = 2; i <= NUM_PAGES; i++) {
const button = document.createElement("button");
button.classList.add("page-button");
button.id = `page-${i}`;
button.textContent = i;
button.onclick = function() {
renderPage(i);
};
numericPagination.appendChild(button);
}
// Render the first page
renderPage(1);
});
// Get the table element
const exchangeRateTable = document.getElementById("exchange-rate");
function renderPage(page) {
// Clear the table
exchangeRateTable.innerHTML = "";
// Calculate the starting and ending indices for the current page
const startIndex = (page - 1) * PAGE_SIZE;
const endIndex = startIndex + PAGE_SIZE;
// Get the exchange rates for the current page
const pageRates = exchangeRates.slice(startIndex, endIndex);
// Populate the table with the exchange rates for the current page
for (const {
aed,
npr
} of pageRates) {
// Create a new table row
const row = document.createElement("tr");
// Create the AED and NPR cell elements
const aedCell = document.createElement("td");
const nprCell = document.createElement("td");
// Set the text content of the cells to the AED and NPR values
aedCell.textContent = `${aed} AED`;
nprCell.textContent = `${npr} NPR`;
// Append the cells to the row
row.appendChild(aedCell);
row.appendChild(nprCell);
// Append the row to the table
exchangeRateTable.appendChild(row);
}
// Highlight the current page button
document.querySelector('.page-button.active').classList.remove('active');
document.getElementById(`page-${page}`).classList.add('active');
}
</script>
【问题讨论】：
-
我在表格中看不到任何
thead元素..？即使它们在那里，exchangeRateTable.innerHTML = ""也会清除表中的所有内容，包括 thead 元素。也就是说，你说的是“HTML 头部元素"，如果这些表示<head>element，则它们不是表格的一部分，根本不应包含任何可见内容。如果您要添加一些内容，解析器会自动将其移动到body。 -
不，我说的是“the”元素
-
需要自己添加就像td一样不会自动生成
标签： javascript html api fetch