Сортировать таблицы по значению класса td, используя jQuery

Question

Я пытаюсь отсортировать несколько td элементов в одном или нескольких tr в зависимости от класса каждого td. Все это в кратном table с classname = "hosts". Сейчас я пытаюсь отсортировать одну таблицу, но мои навыки jQuery не очень хороши (читай очень плохо). Я искал в StackOverflow похожие вопросы, но не смог найти решение.

Пример:

<table class="hosts"
  ><tbody>
    <tr>
      <td class="PASSED" title="192.168.0.38"><a class="hostip" href="#">SRV012344.lan.local</a></td>
      <td class="WARNING" title="192.168.0.18"><a class="hostip" href="#">SRV012345.lan.local</a></td>
      <td class="WARNING" title="192.168.0.88"><a class="hostip" href="#">SRV012399.lan.local</a></td>
      <td class="PASSED" title="192.168.0.48"><a class="hostip" href="#">SRV012334.lan.local</a></td>
      <td class="WARNING" title="192.168.0.58"><a class="hostip" href="#">SRV012244.lan.local</a></td>
    </tr>
    <tr
      ><td class="FAILED" title="192.168.0.68"><a class="hostip" href="#">SRV022666.lan.local</a></td>
      <td class="PASSED" title="192.168.0.98"><a class="hostip" href="#">SRV022333.lan.local</a></td>
    </tr>
  </tbody>
</table>

Результат, который я хотел бы получить (например, отсортирован от переданного до сбойного) ):

<table class="hosts"
  ><tbody>
    <tr>
      <td class="PASSED" title="192.168.0.38"><a class="hostip" href="#">SRV012344.lan.local</a></td>
      <td class="PASSED" title="192.168.0.88"><a class="hostip" href="#">SRV012399.lan.local</a></td>
      <td class="PASSED" title="192.168.0.48"><a class="hostip" href="#">SRV012334.lan.local</a></td>
      <td class="WARNING" title="192.168.0.98"><a class="hostip" href="#">SRV022333.lan.local</a></td>
      <td class="WARNING" title="192.168.0.18"><a class="hostip" href="#">SRV012345.lan.local</a></td>  
    </tr>
    <tr>
      <td class="WARNING" title="192.168.0.58"><a class="hostip" href="#">SRV012244.lan.local</a></td>
      <td class="FAILED" title="192.168.0.68"><a class="hostip" href="#">SRV022666.lan.local</a></td>
    </tr>
  </tbody>
</table>

$(".hosts tbody tr").sort(function(a, b) {
  return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('.hosts tbody');

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

В конце я хотел бы отформатировать несколько таблиц с одним и тем же классом одним и тем же способом. Но это другой вопрос.

Answer 1

Проблема в том, что ваш sort() logi c просматривает сами элементы tr вместо того, чтобы перебирать tr и сортировать td внутри них.

Кроме того, порядок, который вы пытаетесь создать с использованием значений класса, не является алфавитным. Таким образом, вы можете использовать массив имен классов в том порядке, в котором вы хотите их отсортировать, и использовать indexOf() в сравнении. Попробуйте это:

var classOrder = ['PASSED', 'WARNING', 'FAILED']

$(".hosts tbody tr").each(function() {
  $(this).find('td').sort(function(a, b) {
    return classOrder.indexOf(a.className) > classOrder.indexOf(b.className) ? 1 : -1;
  }).appendTo(this);
});

.hostip {
  text-decoration: none;
  color: inherit;
}

.hosts td {
  padding: 10px;
}

.hosts .PASSED {
  background-color: #4CAE4C;
  color: white;
}

.hosts .FAILED {
  background-color: #D43F3A;
  color: white;
}

.hosts .WARNING {
  background-color: #FDC431;
  color: black;
}

.hosts .ERROR {
  background-color: #EE9336;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="hosts">
  <tbody>
    <tr>
      <td class="PASSED" title="192.168.0.38"><a class="hostip" href="#">SRV012344.lan.local</a></td>
      <td class="WARNING" title="192.168.0.18"><a class="hostip" href="#">SRV012345.lan.local</a></td>
      <td class="PASSED" title="192.168.0.88"><a class="hostip" href="#">SRV012399.lan.local</a></td>
      <td class="PASSED" title="192.168.0.48"><a class="hostip" href="#">SRV012334.lan.local</a></td>
      <td class="WARNING" title="192.168.0.58"><a class="hostip" href="#">SRV012244.lan.local</a></td>
    </tr>
    <tr>
      <td class="FAILED" title="192.168.0.68"><a class="hostip" href="#">SRV022666.lan.local</a></td>
      <td class="PASSED" title="192.168.0.98"><a class="hostip" href="#">SRV022333.lan.local</a></td>
    </tr>
  </tbody>
</table>