为什么我的数据没有排列在一个表中

Question

在制作表格并向表格中插入数据时，我的数据未排列在表格内，数据始终显示在表格边框之外并以未排列的形式。

我希望表格中的数据能够以排列形式显示，其中表格标题应与表格下方的匹配数据对齐

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Package Tracking - Admin</title>
</head>
<body>
  <h1>Admin Page</h1>
  <label for="packageIdAdmin">Package ID:</label>
  <input type="text" id="packageIdAdmin">
  <br>
  <label for="status">Status:</label>
  <input type="text" id="status">
  <br>
  <label for="location">Location:</label>
  <input type="text" id="location">
  <br>
  <label for="estimatedDelivery">Estimated Delivery:</label>
  <input type="text" id="estimatedDelivery">
  <br>
  <button onclick="addPackage()">Add Package</button>
  <br><br>
  <h2>List of Saved Packages</h2>
  <button onclick="viewPackageList()">View Package List</button>
  <div id="packageList"></div>

  <script src="admin.js"></script>
</body>
</html>

这些是 javascript 代码

// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
    const packageData = {
      status: status,
      location: location,
      estimatedDelivery: estimatedDelivery
    };
    localStorage.setItem(packageId, JSON.stringify(packageData));
  }
  
  // Function to retrieve package data
  function retrievePackage(packageId) {
    const storedPackage = localStorage.getItem(packageId);
    return storedPackage ? JSON.parse(storedPackage) : null;
  }
  
  // Function to add package by admin
  function addPackage() {
    const packageId = document.getElementById("packageIdAdmin").value.trim();
    const status = document.getElementById("status").value.trim();
    const location = document.getElementById("location").value.trim();
    const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
  
    if (packageId && status && location && estimatedDelivery) {
      storePackage(packageId, status, location, estimatedDelivery);
      alert("Package added successfully!");
    } else {
      alert("Please fill in all fields.");
    }
  }
  
  // Function to view list of saved packages by admin
  function viewPackageList() {
    const packageListDiv = document.getElementById("packageList");
    packageListDiv.innerHTML = "";
  
    packageListDiv.innerHTML += "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";
  
    for (let i = 0; i < localStorage.length; i++) {
      const packageId = localStorage.key(i);
      const packageData = JSON.parse(localStorage.getItem(packageId));
  
      packageListDiv.innerHTML += `
        <tr>
          <td>${packageId}</td>
          <td>${packageData.status}</td>
          <td>${packageData.location}</td>
          <td>${packageData.estimatedDelivery}</td>
          <br>
        </tr>
      `;
    }
  
    packageListDiv.innerHTML += "</table>";
  }

Output of the above code

Answer 1

问题在于，当您将 HTML 放入innerHTML 中时，系统会添加结束标签。 s 您可以使用浏览器开发工具检查工具来查看这一点。

因此您最终会得到不止一张桌子。

防止这种自动关闭的一个简单方法是将所有 HTML 创建一个字符串，然后将该字符串复制到 innerHTML 中。

这是代码（它不能是代码片段，因为代码片段系统不允许访问本地存储。）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Package Tracking - Admin</title>
</head>
<body>
  <h1>Admin Page</h1>
  <label for="packageIdAdmin">Package ID:</label>
  <input type="text" id="packageIdAdmin">
  <br>
  <label for="status">Status:</label>
  <input type="text" id="status">
  <br>
  <label for="location">Location:</label>
  <input type="text" id="location">
  <br>
  <label for="estimatedDelivery">Estimated Delivery:</label>
  <input type="text" id="estimatedDelivery">
  <br>
  <button onclick="addPackage()">Add Package</button>
  <br><br>
  <h2>List of Saved Packages</h2>
  <button onclick="viewPackageList()">View Package List</button>
  <div id="packageList"></div>
<script>

// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
    const packageData = {
      status: status,
      location: location,
      estimatedDelivery: estimatedDelivery
    };
    localStorage.setItem(packageId, JSON.stringify(packageData));
  }
  
  // Function to retrieve package data
  function retrievePackage(packageId) {
    const storedPackage = localStorage.getItem(packageId);
    return storedPackage ? JSON.parse(storedPackage) : null;
  }
  
  // Function to add package by admin
  function addPackage() {
    const packageId = document.getElementById("packageIdAdmin").value.trim();
    const status = document.getElementById("status").value.trim();
    const location = document.getElementById("location").value.trim();
    const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
  
    if (packageId && status && location && estimatedDelivery) {
      storePackage(packageId, status, location, estimatedDelivery);
      alert("Package added successfully!");
    } else {
      alert("Please fill in all fields.");
    }
  }
  
  // Function to view list of saved packages by admin
  function viewPackageList() {
    const packageListDiv = document.getElementById("packageList");
    let str = "";
  
    str += "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";

    for (let i = 0; i < localStorage.length; i++) {
      const packageId = localStorage.key(i);
      const packageData = JSON.parse(localStorage.getItem(packageId));
  console.log(localStorage.length);
      str += `
        <tr>
          <td>${packageId}</td>
          <td>${packageData.status}</td>
          <td>${packageData.location}</td>
          <td>${packageData.estimatedDelivery}</td>
          <br>
        </tr>
      `;
    }
  
    str += "</table>";
    packageListDiv.innerHTML = str;
  }
  localStorage.clear();
</script>
</body>
</html>

为什么我的数据没有排列在一个表中

问题描述投票：0回答：1

1个回答

最新问题

为什么我的数据没有排列在一个表中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1