<div>透視表（Pivot Table）是一種在數據分析中非常常見的工具，它可以幫助我們快速、靈活地對數據進行匯總和分析。在 Excel、SQL 和各種數據處理語言中，都有對應的透視表功能。在網頁開發中，我們也可以利用<div>元素和一些簡單的代碼實現類似的功能。</div>

接下來，我們將通過幾個代碼案例來詳細解釋如何使用<div>透視表。

，我們需要準備一些數據。假設我們要展示一個簡單的銷售數據表格，包含產品名稱、銷售額和銷售時間。數據如下：

產品名稱    銷售額    銷售時間
產品A      100      2021-01-01
產品B      200      2021-01-01
產品A      150      2021-01-02
產品C      300      2021-01-02
產品B      120      2021-01-03

案例一：按產品名稱匯總銷售額

我們要做的是根據產品名稱對銷售額進行匯總。在<div>中，我們可以使用 CSS 的屬性選擇器來選擇對應的元素，并使用 JavaScript 來計算銷售額的總和。代碼如下：

<div id="pivotTable">
<div class="row">產品名稱</div>
<div class="row">產品A</div>
<div class="row">產品B</div>
<div class="row">產品C</div>
</div>
<br>
<script>
// 數據來源
var data = [
{productName: "產品A", sales: 100},
{productName: "產品B", sales: 200},
{productName: "產品A", sales: 150},
{productName: "產品C", sales: 300},
{productName: "產品B", sales: 120}
];
<br>
  // 匯總銷售額
var pivotTable = document.getElementById("pivotTable");
var rows = pivotTable.querySelectorAll(".row");
rows.forEach(function(row) {
var productName = row.textContent;
var totalSales = 0;
<br>
    data.forEach(function(item) {
if (item.productName === productName) {
totalSales += item.sales;
}
});
<br>
    row.innerHTML += " 銷售額：" + totalSales;
});
</script>

通過上述代碼，我們可以在頁面上顯示出按產品名稱匯總的銷售額。

案例二：按銷售時間匯總銷售額

接下來，我們來看一個按銷售時間匯總銷售額的案例。我們可以利用<div>元素的嵌套關系，將產品名稱作為外層<div>，銷售時間作為內層<div>，并計算相應的銷售額。代碼如下：

<div id="pivotTable">
<div class="row">
<div>產品名稱</div>
<div>銷售時間</div>
</div>
<div class="row">
<div>產品A</div>
<div>2021-01-01</div>
</div>
<div class="row">
<div>產品B</div>
<div>2021-01-01</div>
</div>
<div class="row">
<div>產品A</div>
<div>2021-01-02</div>
</div>
<div class="row">
<div>產品C</div>
<div>2021-01-02</div>
</div>
<div class="row">
<div>產品B</div>
<div>2021-01-03</div>
</div>
</div>
<br>
<script>
// 數據來源
var data = [
{productName: "產品A", sales: 100, saleDate: "2021-01-01"},
{productName: "產品B", sales: 200, saleDate: "2021-01-01"},
{productName: "產品A", sales: 150, saleDate: "2021-01-02"},
{productName: "產品C", sales: 300, saleDate: "2021-01-02"},
{productName: "產品B", sales: 120, saleDate: "2021-01-03"}
];
<br>
  // 匯總銷售額
var pivotTable = document.getElementById("pivotTable");
var rows = pivotTable.querySelectorAll(".row");
<br>
  // 通過嵌套<div>實現按銷售時間匯總
rows.forEach(function(row) {
if (row.children.length === 1) {
var productName = row.children[0].textContent;
var totalSales = 0;
data.forEach(function(item) {
if (item.productName === productName) {
totalSales += item.sales;
}
});
row.innerHTML += "<div>銷售額：" + totalSales + "</div>";
} else {
var productName = row.children[0].textContent;
var saleDate = row.children[1].textContent;
var totalSales = 0;
data.forEach(function(item) {
if (item.productName === productName && item.saleDate === saleDate) {
totalSales += item.sales;
}
});
row.innerHTML += "<div>銷售額：" + totalSales + "</div>";
}
});
</script>

通過上述代碼，我們可以在頁面上顯示出按銷售時間匯總的銷售額。

以上兩個案例展示了如何利用<div>元素和一些簡單的代碼實現透視表的功能。在實際的開發中，我們可以根據具體的需求和數據結構，靈活運用<div>元素和 CSS、JavaScript 來實現更復雜的透視表。