根據下拉選項對表格進行排序

Question

我正在嘗試根據用戶從下拉列表中選擇的排序選項對我的表進行排序。 我遇到了這個話題和那個話題，但它們都是基於 jQuery 的，但它們似乎都不適合我，因為我需要純 Javascript 解決方案。

我的HTML：

<label>Sort order:</label>
<select>
  <option>Item asc</option>
  <option>Item desc</option>
  <option>Price asc</option>
  <option>Price desc</option>
  <option>Year asc</option>
  <option>Year desc</option>
</select>
<table>
<thead>
  <tr>
    <th>item</th>
    <th>price</th>
    <th>year</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Skoda Octavia</td>
    <td>7000</td>
    <td>2012</td>
  </tr>
  <tr>
    <td>Toyota Yaris</td>
    <td>3000</td>
    <td>2011</td>    
  </tr>
  <tr>
    <td>Ford Focus</td>
    <td>5000</td>
    <td>2009</td>
  </tr>
</tbody>
</table>

因為，我是新手，所以對於如何解決問題的任何幫助，我將不勝感激。

Answer 1

基本上，您的問題可以分為三個較小的問題：

將您的 HTML 表格數據放入包含對象數組的 javascript 對象中，每個對象都具有對應於列標題和單元格值的屬性，以便您可以根據屬性值對該數組進行排序：

const jsonFromHtml = (tbody, thead) => {
    let tableJson = {rows:[]};
  [...tbody.children].forEach(tableRow => {
    let rowEntry = {};
    [...tableRow.children].forEach((cell, column) => rowEntry[thead.children[0].children[column].textContent] = cell.textContent);
    tableJson.rows.push(rowEntry);
  });
  return tableJson;
};

以任意順序對行項目進行排序：

const customSort = (arr, key, order) => {
    let sortCompare = order == 'Desc' ? -1 : 1;
  return arr.sort((first, second) => first[key]>second[key] ?  sortCompare : first[key]<second[key] ?  -sortCompare : 0);
};

根據已排序的行數組組成您的表體內部 HTML：

const arrayToTable = (arr, tbody, thead) => {
    let rows = [];
    arr.forEach((row, rowNum) => {
    row = [...thead.children[0].children].map(th => row[th.textContent] ? row[th.textContent] : '');
    row = row.map(td => `<td>${td}</td>`);
    row = `<tr>${row.join('')}</tr>`;
    rows.push(row);
  });
  tbody.innerHTML = rows.join('');
};

 const myTableTbody = document.querySelector('#myTable tbody'); const myTableThead = document.querySelector('#myTable thead'); const jsonFromHtml = (tbody, thead) => { let tableJson = {rows:[]}; [...tbody.children].forEach(tableRow => { let rowEntry = {}; [...tableRow.children].forEach((cell, column) => rowEntry[thead.children[0].children[column].textContent] = cell.textContent); tableJson.rows.push(rowEntry); }); return tableJson; }; const customSort = (arr, key, order) => { let sortCompare = order == 'Desc'? -1: 1; return arr.sort((first, second) => first[key]>second[key]? sortCompare: first[key]<second[key]? -sortCompare: 0); }; const arrayToTable = (arr, tbody, thead) => { let rows = []; arr.forEach((row, rowNum) => { row = [...thead.children[0].children].map(th => row[th.textContent]? row[th.textContent]: ''); row = row.map(td => `<td>${td}</td>`); row = `<tr>${row.join('')}</tr>`; rows.push(row); }); tbody.innerHTML = rows.join(''); }; document.querySelector('#selectionOrder').addEventListener('change', function(){ let sortKey = this.value.match(/[az]+/)[0]; let sortOrder = this.value.match(/(A|De)sc/)? this.value.match(/(A|De)sc/)[0]: 'Asc'; let myTableJson = jsonFromHtml(myTableTbody, myTableThead); myTableJson.rows = customSort(myTableJson.rows, sortKey, sortOrder); arrayToTable(myTableJson.rows, myTableTbody, myTableThead); });

 <label>Sort order:</label> <select id="selectionOrder"> <option value="itemAsc">Item asc</option> <option value="itemDesc">Item desc</option> <option value="priceAsc">Price asc</option> <option value="priceDesc">Price desc</option> <option value="yearAsc">Year asc</option> <option value="yearDesc">Year desc</option> </select> <table id="myTable"> <thead> <tr> <th>item</th> <th>price</th> <th>year</th> </tr> </thead> <tbody> <tr> <td>Skoda Octavia</td> <td>7000</td> <td>2012</td> </tr> <tr> <td>Toyota Yaris</td> <td>3000</td> <td>2011</td> </tr> <tr> <td>Ford Focus</td> <td>5000</td> <td>2009</td> </tr> </tbody> </table>

Answer 2

這是一個在變量中定義數據並從中構建 HTML 的解決方案。

 // Define data in variables, not in HTML: const columns = ["item", "price", "year"]; const data = [ { "item": "Skoda Octavia", "price": 7000, "year": 2012 }, { "item": "Toyota Yaris", "price": 3000, "year": 2011 }, { "item": "Ford Focus", "price": 5000, "year": 2009 }, ] // Elements in the DOM const orderSelect = document.getElementById("orderSelect"); const dataTable = document.getElementById("dataTable"); // Populate select list based on the columns of the data for (const column of columns) { for (const dir of [" asc", " desc"]) { const opt = document.createElement("option"); opt.value = opt.text = column + dir; orderSelect.add(opt); } } function refreshTable() { const [sortBy, order] = orderSelect.value.split(" "); const sign = order === "asc"? -1: 1; data.sort((a, b) => a[sortBy] < b[sortBy]? sign: a[sortBy] > b[sortBy]? -sign: 0); // Clear table dataTable.innerHTML = ""; // Create header row const row = dataTable.insertRow(-1); for (const column of columns) { const th = document.createElement("th"); th.textContent = column; row.appendChild(th); } // Create data rows for (const record of data) { const row = dataTable.insertRow(-1); for (const column of columns) { const td = row.insertCell(-1); td.textContent = record[column]; } } } // Populate data table refreshTable(); // handler orderSelect.addEventListener("change", refreshTable);

 <label for="orderSelect">Sort order:</label> <select id="orderSelect"></select> <table id="dataTable"></table>