Сортировка таблицы на основе раскрывающегося списка

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 из этого.

// 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>

Answer 2

По сути, вашу проблему можно разделить на три более мелкие проблемы:

Получите данные таблицы 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(/[a-z]+/)[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>