Могу ли я сортировать данные в моей таблице в html на основе количества, которое у меня есть в моем массиве?

Так, например, у меня есть таблица, которая отображается так.

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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

<h2>HTML Table</h2>
<table>
  <tr>
    <th>ID</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>6</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Таким образом, эти данные не сохраняются в моей базе данных, но я сохранил их фактическое количество, поэтому всякий раз, когда я собираюсь редактировать, они будут просто грохотать в моем представлении, и моя цель - сначала упорядочить их на основе их количества.

var count = [1,2,3,4,5,6];

поэтому с этим массивом предположим, что это их расположение. Мой вопрос в том, как или возможно ли расположить их на основе моей переменной count с помощью столбца ID?

Добро пожаловать в Stack Overflow. Кажется, вы хотите отсортировать строки таблицы на основе определенного столбца. Есть ли конкретное событие, которое должно вызвать это? Что вы уже пробовали и что не работает? Предоставьте минимальный воспроизводимый пример: stackoverflow.com/help/минимально-воспроизводимый-пример

— 22.03.2022 18:23

Привет @Twisty, поэтому предположим, что когда пользователь нажимает Edit button, данные этой таблицы уже будут там, но в ответе будут уникальные данные, которые будут их количеством или расположением.

— 22.03.2022 18:28

Я не могу ничего предположить. Я не вижу кнопки "Изменить" в вашем примере. Предоставьте минимальный воспроизводимый пример: stackoverflow.com/help/минимально-воспроизводимый-пример

— 22.03.2022 21:23

javascript jquery

22.03.2022 18:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, возможно:

const sort = (rows, sort) => sort.map(e => rows.find(({ id }) => id == e))
const getRowId = (row) => +jQuery(jQuery(row).find('td')[0]).text() // 0 is the first column
const getSortObj = (row) => ({ id: getRowId(row), row })

const setDirectionText = (directionSpan) => (direction) => directionSpan.text(direction)

jQuery(document).ready(function($) {
  let sortByArr = [1, 2, 3, 4, 5, 6]
  let direction = "ASC"
  const directionSpan = setDirectionText($("#direction"))
  directionSpan(direction)

  $('#btn-sort').on('click', function() {
    const $rows = $('#table tbody tr')
    const sortedRows = sort($.map($rows, getSortObj), sortByArr).map(({ row }) => row)
    $('#table tbody').html(sortedRows)
    
    sortByArr = sortByArr.reverse()
    direction = direction === "ASC" ? "DESC" : "ASC"
    directionSpan(direction)
  })
})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>HTML Table</h2>
<button id = "btn-sort">SORT TABLE <span id = "direction"></span></button>
<br />
<br />
<table id = "table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>6</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

Этот фрагмент делает немного больше, чем вы просили: он может сортировать в порядке возрастания и убывания — переключается после каждой сортировки.

24.03.2022 21:39