Homepage

Appearance

效果 ​

Preview
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水果销售数据</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <table class="fruit-table">
      <caption>
        表一 水果销售数据
      </caption>
      <!-- 表格标题 -->
      <thead>
        <tr>
          <th rowspan="2">水果种类</th>
          <th rowspan="2">品种</th>
          <th rowspan="2">日销售量</th>
          <th rowspan="2">库存量</th>
          <th colspan="5">销售情况</th>
        </tr>
        <tr>
          <th>供应商数量</th>
          <th>销售门店数</th>
          <th>月销售量</th>
          <th>销售额</th>
          <th>销售活跃度</th>
        </tr>
      </thead>
      <tbody id="table-body">
        <!-- 表格内容将通过JavaScript动态生成 -->
      </tbody>
    </table>

    <script src="script.js"></script>
  </body>
</html>
js
document.addEventListener("DOMContentLoaded", () => {
  const tableBody = document.getElementById("table-body");
  const dataList = [
    {
      fruit: "苹果",
      variety: "红富士",
      dailySales: 100,
      stock: 500,
      suppliers: 3,
      stores: 50,
      monthlySales: 3000,
      revenue: 15000,
      activityRate: "高",
    },
    {
      fruit: "苹果",
      variety: "青苹果",
      dailySales: 80,
      stock: 400,
      suppliers: 3,
      stores: 50,
      monthlySales: 2400,
      revenue: 12000,
      activityRate: "中",
    },
    {
      fruit: "香蕉",
      variety: "巴拿马",
      dailySales: 120,
      stock: 600,
      suppliers: 4,
      stores: 60,
      monthlySales: 3600,
      revenue: 18000,
      activityRate: "高",
    },
    {
      fruit: "橙子",
      variety: "新奇士",
      dailySales: 90,
      stock: 550,
      suppliers: 5,
      stores: 70,
      monthlySales: 2700,
      revenue: 13500,
      activityRate: "低",
    },
  ];

  // 合并行的逻辑
  for (let i = 0; i < dataList.length; i++) {
    let startRow;
    let rowspan = 1;

    if (i === dataList.length - 1) {
      if (dataList[i].fruit !== dataList[i - 1].fruit) {
        dataList[i].rowspan = rowspan;
      }
      break;
    }

    for (let j = i; j < dataList.length - 1; j++) {
      startRow = j;
      if (dataList[j].fruit === dataList[j + 1].fruit) {
        rowspan++;
      } else {
        break;
      }
    }

    dataList[i].rowspan = rowspan;
    i = startRow;
  }

  const lastRow = dataList[dataList.length - 1];
  lastRow.colspan = 2;

  // 动态生成表格内容
  dataList.forEach((item, index) => {
    const row = document.createElement("tr");

    if (item.rowspan) {
      const fruitCell = document.createElement("td");
      fruitCell.textContent = item.fruit;
      fruitCell.setAttribute("rowspan", item.rowspan);
      row.appendChild(fruitCell);
    }

    if (item.variety) {
      const varietyCell = document.createElement("td");
      varietyCell.textContent = item.variety;
      row.appendChild(varietyCell);
    }

    const dailySalesCell = document.createElement("td");
    dailySalesCell.textContent = item.dailySales;
    row.appendChild(dailySalesCell);

    const stockCell = document.createElement("td");
    stockCell.textContent = item.stock;
    row.appendChild(stockCell);

    const suppliersCell = document.createElement("td");
    suppliersCell.textContent = item.suppliers;
    row.appendChild(suppliersCell);

    const storesCell = document.createElement("td");
    storesCell.textContent = item.stores;
    row.appendChild(storesCell);

    const monthlySalesCell = document.createElement("td");
    monthlySalesCell.textContent = item.monthlySales;
    row.appendChild(monthlySalesCell);

    const revenueCell = document.createElement("td");
    revenueCell.textContent = item.revenue;
    row.appendChild(revenueCell);

    const activityRateCell = document.createElement("td");
    activityRateCell.textContent = item.activityRate;
    row.appendChild(activityRateCell);

    tableBody.appendChild(row);
  });
});
css
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

thead {
  background-color: #f2f2f2;
}

th,
td {
  padding: 10px;
  text-align: center; /* 内容居中 */
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}