Сортировка HTML таблицы по столбцам с высокими, средними и низкими значениями, используя JavaScript

Question

Я пытаюсь отсортировать таблицу, используя javascript, но не в традиционном числовом или алфавитном методе сортировки.Каждая строка таблицы имеет 3 TD.Первый - это имя, второй - уровень (высокий, средний, низкий или пустой), а третий - также уровень (высокий, средний, низкий или пустой).Я пытаюсь отсортировать таблицу по значению уровней, максимуму, среднему или низкому уровню, и отправляю пустые ТД внизу.

Я обычно работаю с PHP, поэтому я немного слаб, когда дело доходит до JavaScript.Основы того, что я пытаюсь сделать:

Подсчитать количество tr, исключая первое (потому что это заголовок), для каждого tr получить innerHTML второго td.Сравните каждый tds innerHTML и расположите их от High до low, оставляя пустыми последние.Если в заголовке снова нажата обратная.

Я думаю, у меня все получилось, но я застрял, когда дело доходит до переключения порядка элементов.

<table id="myTable2">
<tr>
   <th>Food/Beverage</th> 
   <th onclick="sortTable(1)">Alkalizing Level</th>
   <th onclick="sortTable(2)">Acidic Level</th>
</tr>
<tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
    <td>Ale (Pale)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
   <td>Alkaline, Ionized Water</td>
    <td>High</td>
   <td></td>
</tr>
<tr>
   <td>Almond Butter</td>
   <td>Medium</td>
   <td></td>
</tr>
<tr>
   <td>Almond Milk (unsweetened)</td>
   <td>Low</td>
   <td></td>
</tr>
<tr>
  <td>Almonds</td>
  <td>Medium</td>
  <td></td>
</tr>
<tr>
  <td>Amaranth Seeds</td>
  <td>Low</td>
  <td></td>
</tr>
<tr>
   <td>Apple Cider Vinegar</td>
   <td></td>
   <td>Low</td>
</tr>
<tr>
  <td>Apple Juice</td>
  <td></td>
  <td>High</td>
</tr>
<tr>
  <td>Apple Pie</td>
  <td></td>
  <td>High</td>
 </tr>
<tr>
  <td>Apples</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots (Dried)</td>
  <td></td>
  <td>High</td>
  </tr>
</table>

JS

<script>
table = document.getElementById("myTable2");    
rows = table.rows;
i = 1;
count = 0;
while(i < rows.length){
alkLevel = rows[i].getElementsByTagName("TD")[1].innerHTML;
alkLevelNext = rows[i+1].getElementsByTagName("TD")[1].innerHTML;
var alkLevelPosition = 0;

i++;
if(alkLevel === "High"){
    alkLevelPosition += 1;

}
if (alkLevel === "Medium"){
    alkLevelPosition += 2;

    }
if(alkLevel === "Low"){
    alkLevelPosition += 3;

   }
if(alkLevel === ""){
    alkLevelPosition += 4;

   }



    if (alkLevelPosition > alkLevelNext) {

      //shouldSwitch = true;

      //break;
    }

 }
</script>

Answer 1

Вот подход к получению искомой сортировки таблицы.

Добавлены прослушиватели событий щелчка в заголовки таблицы (вместо встроенного подхода onclick), затем определено, какой столбец управляет сортировкой, используяcellIndex, и включил функцию сортировки, которая правильно обрабатывает высокий, средний и низкий баллы.

Каждый раз, когда щелкается заголовок, все строки таблицы (кроме строки заголовка) удаляются, сортируются, а затемдобавляется в новом порядке (добавлены элементы thead и tbody для упрощения выбора) - кроме того, класс, указывающий направление сортировки, добавляется к соответствующему элементу заголовка, чтобы можно было поменять местами следующую сортировку.

Кроме того, в качестве бонуса добавлена ​​альфа-сортировка в первый столбец таблицы (просто для упрощения выбора элементов и прикрепления прослушивателей событий).

const headings = document.querySelectorAll('#myTable th');
const tbody = document.querySelector('#myTable tbody');

const sortRows = (order, i) => {
  let rows = document.querySelectorAll('#myTable tbody tr');
  if (i === 0) {
    if (order === 'asc') {
      return Array.from(rows).sort();
    } else {
      return Array.from(rows).sort().reverse();
    }
  } else {
    return Array.from(rows).sort((a, b) => {
      let s = 0;
      let aval = a.cells[i].textContent;
      let bval = b.cells[i].textContent;
      if (aval === bval) {
        s = 0;
      } else if (aval === 'High') {
        s = 1;
      } else if (bval === 'High') {
        s = -1;
      } else if (aval === 'Medium') {
        s = 1;
      } else if (bval === 'Medium') {
        s = -1;
      } else if (aval === 'Low') {
        s = 1;
      } else if (bval === 'Low') {
        s = -1;
      }
      if (order === 'desc') {
        s *= -1;
      }
      return s;
    });
  }
}

for (let heading of headings) {
  heading.addEventListener('click', (event) => {
    let fragment = document.createDocumentFragment();
    let elem = event.target;
    let order = 'asc';
    if (elem.classList.contains('asc')) {
      order = 'desc';
      elem.classList.remove('asc');
      elem.classList.add('desc');
    } else {
      elem.classList.remove('desc');
      elem.classList.add('asc');
    }
    let sorted = sortRows(order, elem.cellIndex);
    for (let s of sorted) {
      fragment.appendChild(s);
    }
    while (tbody.firstChild) {
      tbody.removeChild(tbody.firstChild);
    }
    tbody.appendChild(fragment);
  });
}

th:hover {
  cursor: pointer;
}

<table id="myTable">
  <thead>
    <tr>
      <th>Food/Beverage</th>
      <th>Alkalizing Level</th>
      <th>Acidic Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ale (Dark)</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Ale (Pale)</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Alkaline, Ionized Water</td>
      <td>High</td>
      <td></td>
    </tr>
    <tr>
      <td>Almond Butter</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr>
      <td>Almond Milk (unsweetened)</td>
      <td>Low</td>
      <td></td>
    </tr>
    <tr>
      <td>Almonds</td>
      <td>Medium</td>
      <td></td>
    </tr>
    <tr>
      <td>Amaranth Seeds</td>
      <td>Low</td>
      <td></td>
    </tr>
    <tr>
      <td>Apple Cider Vinegar</td>
      <td></td>
      <td>Low</td>
    </tr>
    <tr>
      <td>Apple Juice</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Apple Pie</td>
      <td></td>
      <td>High</td>
    </tr>
    <tr>
      <td>Apples</td>
      <td></td>
      <td>Medium</td>
    </tr>
    <tr>
      <td>Apricots</td>
      <td></td>
      <td>Medium</td>
    </tr>
    <tr>
      <td>Apricots (Dried)</td>
      <td></td>
      <td>High</td>
    </tr>
  </tbody>
</table>

Answer 2

Похоже, вам нужна помощь во взаимодействии с DOM (объектная модель документа).Если посмотреть на то, что вы написали, то пока все выглядит хорошо, но вы ничего не сделали, чтобы изменить порядок отображения тегов.

Существует множество библиотек, которые могут сделать это за вас,но я рекомендую сделать небольшое исследование JavaScript самостоятельно, чтобы узнать, как на самом деле манипулировать DOM (учитывая, что это фундаментально для того, что JavaScript делает в браузере).В качестве подсказки я предлагаю разбить задачу на этапы, которые потребуется выполнить браузеру:

1. Изолировать объект строки (все, что находится между <tr></tr>) в памяти из DOM.
2. Удалите объект строки из DOM.
3. Повторно вставьте объект строки в DOM в нужном месте.

Эта ссылка из W3Schools является хорошим примером.о том, как именно это сделать: https://www.w3schools.com/howto/howto_js_sort_table.asp

У них также есть ряд учебных пособий и материалов, которые помогут вам повысить уровень владения как HTML, так и JavaScript, а также CSS (что действительно важно для внешнего интерфейса).материал).Удачи!Дайте нам знать, если у вас есть какие-либо вопросы!