久久精品无码人妻A级毛片玉甫团,国产精品人妻久久久久厨房,番茄视频成人在线观看

在網站上顯示數據時，重要的是提供使用戶更輕松地瀏覽數據的功能。其中一項功能就是能夠對數據進行排序。

對數據進行排序是指將數據按照指定的值，按升序或降序排列。我們可以使用 JavaScript 在網站的客戶端手動處理數據排序。如果您正在開發靜態網站或消除服務器中數據排序的負擔，這尤其有用。

在本教程中，我們將使用 JavaScript 將模擬 JSON 響應中的數據顯示到 HTML 表中。我們還將包含使表格可根據表標題中的值進行排序的功能。

這是成品。單擊任意表格標題即可對表格進行相應排序。

1. 用 HTML 放置內容


 標簽是用于在網頁上顯示數據的語義 HTML 標簽。我們將把 
 標簽放置在表容器 div 中，這將允許我們在 CSS 中包含一些響應式樣式。
<div class="table-container">
  <table class="data-table">
  </table>
</div>
登錄后復制
我們的表將包含表頭、thead 和表內容、tbody 標簽。在表頭中，我們將在每個 th 單元格中包含按鈕，這些按鈕將用于處理排序功能。表格內容的單元格將使用我們的 JSON 響應中的數據通過 JavaScript 添加。
<div class="table-container">
  <table class="data-table">
    <thead>
      <tr>
        <th><button id="name">Name</button></th>
        <th><button id="type">Type</button></th>
        <th><button id="hp">HP</button></th>
        <th><button id="attack">Attack</button></th>
        <th><button id="defense">Defense</button></th>
        <th><button id="spAttack">Sp. Attack</button></th>
        <th><button id="spDefense">Sp. Defense</button></th>
        <th><button id="speed">Speed</button></th>
        <th><button id="total">Total</button></th>
      </tr>
    </thead>
    <tbody id="table-content"></tbody>
  </table>
</div>
登錄后復制

2.用CSS制作響應式表格
使用 HTML 表格的更常見問題之一是缺乏響應能力。該表格可能存在單元格重疊問題或超出整頁的邊界。
我們可以通過將表格放置在具有溢出滾動屬性的整頁寬度的表格容器中來解決這些問題。這樣，表格始終只與整頁一樣寬，并且由于可滾動溢出而無需縮小單元格。我們還將在表格單元格中包含最小寬度屬性，以避免文本換行。
這是使我們的表格可滾動所需的 CSS：
.table-container {
  width: 100%;
  overflow: scroll;
}

table {
  width: 100%;
}
登錄后復制
然后我們可以添加其余的樣式：
.table-container {
  margin: auto;
  max-width: 1200px;
  min-height: 100vh;
  overflow: scroll;
  width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead tr {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  height: 1px;
}

th {
  font-weight: bold;
  height: inherit;
  padding: 0;
}

th:not(:first-of-type) {
  border-left: 1px solid #ddd;
}

th button {
  background-color: #eee;
  border: none;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  margin: 0;
  min-width: max-content;
  padding: 0.5rem 1rem;
  position: relative;
  text-align: left;
  width: 100%;
}

tbody tr {
  border-bottom: 1px solid #ddd;
}

td {
  padding: 0.5rem 1rem;
  text-align: left;
}
登錄后復制

3. 將 JSON 數據放入 HTML 表
對于此示例，我們將使用模擬解析的 JSON 響應。這就是我們的數據：
const response = {
   "pokedata": [
      {
         "name": "Bulbasaur",
         "type": "Grass",
         "hp": 45,
         "attack": 49,
         "defense": 49,
         "spAttack": 65,
         "spDefense": 65,
         "speed": 45,
         "total": 318
      },
      ...
   ]
}
登錄后復制
我們將把數據放在 <tbody id="table-content"> 標記中，以便我們在 JavaScript 中定位該元素；
const tableContent = document.getElementById("table-content")
登錄后復制
行內容將基于 response.pokedata 中的每個對象。讓我們定義一個函數來根據對象數據創建新行：
const createRow = (obj) => {
  const row = document.createElement("tr");
  const objKeys = Object.keys(obj);
  objKeys.map((key) => {
    const cell = document.createElement("td");
    cell.setAttribute("data-attr", key);
    cell.innerHTML = obj[key];
    row.appendChild(cell);
  });
  return row;
};
登錄后復制
在此函數中，我們使用 Object.keys() 方法以數組形式獲取對象鍵。返回值如下所示：
一旦我們獲得了對象鍵的數組，我們就使用 .map() 方法循環遍歷每個鍵。 map 方法對數組中的每個項目執行我們傳遞給它的函數。
在此映射函數中，我們為數組中的每個項目創建一個新單元格，并將單元格的 innerHTML 設置為相應的對象鍵值。 
最后，我們使用 .appendChild() 方法將創建的單元格附加到函數開頭定義的行。
現在我們有了行創建函數，我們將定義一個函數來循環 response.pokedata 數組并將每個新行附加到我們的 tableContent 元素。
const getTableContent = (data) => {
  data.map((obj) => {
    const row = createRow(obj);
    tableContent.appendChild(row);
  });
};
登錄后復制
我們會將 getTableContent 函數傳遞到事件偵聽器中，以便在頁面加載后將內容添加到表中。
window.addEventListener("load", () => {
  getTableContent(response.pokedata);
});
登錄后復制

4. 使用 JavaScript 對數據進行排序
現在我們已經創建了表格，讓我們添加排序功能。在我們的 HTML 中，我們在標題單元格中包含了按鈕，這些按鈕以對象鍵作為其 id。現在讓我們定位這些按鈕：
const tableButtons = document.querySelectorAll("th button");
登錄后復制
我們希望根據單擊的按鈕對數據進行排序，并且還包含一個在單擊按鈕時切換排序方向（升序或降序）的功能。
我們可以使用 .sort() 方法來處理 response.pokedata 數組中的數據排序。 sort 方法接受一個比較兩個不同參數的函數，并根據函數響應對它們進行排序：
















































compareFunction(a, b) 返回值

排序順序




> 0

排序 a 之后 b



< 0
將 a 排序在 b 之前


=== 0
保持 a 和 b 的原始順序




來源：MDN
關于排序方法需要注意的另一件事是它會改變它所操作的原始數組。這意味著它改變了我們原始數組的值。

我們可以通過使用擴展語法來避免改變原始數組[…]

現在我們可以創建排序函數了。這就是我們的排序函數的邏輯：

清除tableContent元素中的內容

根據所選參數和方向對數據進行排序

使用 getTableContent 函數將排序后的數據附加到我們的 tableContent

const sortData = (data, param, direction = "asc") => {
  tableContent.innerHTML = '';
  const sortedData =
    direction == "asc"
      ? [...data].sort(function (a, b) {
          if (a[param] < b[param]) {
            return -1;
          }
          if (a[param] > b[param]) {
            return 1;
          }
          return 0;
        })
      : [...data].sort(function (a, b) {
          if (b[param] < a[param]) {
            return -1;
          }
          if (b[param] > a[param]) {
            return 1;
          }
          return 0;
        });

  getTableContent(sortedData);
};

登錄后復制
我們的排序函數需要三個參數：
data：待排序的數組
param：用于對數組進行排序的值
direction：按升序或降序對數組進行排序。默認參數值設置為“asc”。
我們通過將innerHTML 設置為空白字符串來清除tableContent 元素中的內容。然后，我們使用 .sort() 方法和 direction 參數來確定數據應如何排序。我們反轉比較函數以便按降序排序。通過這種方式使用比較函數，我們可以對數據進行排序，而不管值的類型（字符串、整數、浮點數等）
最后，我們將 sortedData 作為表內容中的新值傳遞。
現在，我們將排序函數傳遞到表格按鈕的單擊事件偵聽器中，并處理切換排序方向。 
window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

登錄后復制
在此函數中，我們通過在按鈕上設置 data-dir 屬性來處理切換以確定排序方向。我們還將更新 CSS 以根據排序方向在按鈕旁邊顯示一個圖標：
th button::after {
  position: absolute;
  right: 0.5rem;
}

th button[data-dir="asc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");
}

th button[data-dir="desc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");
}

登錄后復制
我們不想讓圖標顯示在所有以前單擊的按鈕上，因此我們將定義一個 resetButtons 函數，該函數刪除任何未單擊的按鈕上的 data-dir 屬性。
const resetButtons = (event) => {
  [...tableButtons].map((button) => {
    if (button !== event.target) {
      button.removeAttribute("data-dir");
    }
  });
};

登錄后復制
我們會將該函數傳遞到按鈕事件偵聽器中，以便在單擊新按鈕時重置以前的按鈕
window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      resetButtons(e);
      
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

登錄后復制
結論
這樣，我們就完成了！我們僅使用普通 JavaScript 創建了一個可排序的表格！

以上就是創建具有排序功能的啟用 JavaScript 的 HTML 表的詳細內容，更多請關注www.92cms.cn其它相關文章！