Javascript 排序 html 元素

Question

我正在尝试对 JS 中的 html 元素进行排序，因此它看起来像这样，

我有它，所以当你将鼠标悬停在它们上面时，它们会扩展并显示额外信息，但只有每一行中的最后一个具有该功能，我无法弄清楚为什么，(我已经尝试了几个小时)如果有人可以的话帮助我，我将不胜感激。

我会把它贴在一个 jsfiddle 链接上，我会在这里贴上我的 js 代码，这样阅读起来更容易，所有的 css/html/js 代码都在 jsfiddle 上， https://jsfiddle.net/b7dt0xwj/

var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] //'saturday', "sunday"];
    var show = document.getElementsByTagName("tr");

function sortElements(){
    // console.log(show)
    for (var i=0; i<4; i++){

        var dayHeader = document.getElementById(days[i])
        var showInfo = document.getElementsByClassName("info")[1]

        // console.log(showInfo)
        for(var j=0; j<show.length; j++){
            if (show[j].getAttribute("day") === dayHeader.getAttribute("id")){
                dayHeader.parentNode.insertBefore(show[j], dayHeader.nextSibling);
                console.log(show[j])
                console.log(j)
                dayHeader.parentNode.insertBefore(showInfo, show[j].nextSibling);
            }
        }
    }
}

Answer 1

在找到合适的日期后，我使用了 jQuery 的 .insertAfter。但是，我注意到您依赖于紧随其后的下一个元素。所以，我也移动了那个元素。

function sortElements(){
  $(".main table tr[day]").each(function () {
    var $this = $(this),
    		$nextEl = $this.next();
    $this.insertAfter($this.parent().find("#" + $this.attr("day")));
    $nextEl.insertAfter($this)
  });
}

sortElements();

body {
  font-family: "Roboto";
  padding: 0px;
  margin: 0px;
  background-color: #dddcdc;
}

p {
  display: inline;
}

.logo {
  display: inline-block;
  width: 120px;
  margin-top: 10px;
  margin-right: 0px;
  margin-left: 75px;
  font-weight: bold;
  color: #ff0808;
  font-size: 28px;
}

.logo a {
  text-decoration: none;
  color: red;
}

.logo a:hover {
  color: #e20505;
}

.navbar {
  background-color: #e7e6e6;
  box-shadow: 1px 1px 7px #5c5c5c;
  /* x, distance */
  margin: 0px;
  height: 52px;
}

.navbar-links {
  display: inline;
}

.navbar-links p a {
  margin: 0px 0px 0px 65px;
  padding: 0px;
  display: inline;
  font-weight: bold;
  text-transform: uppercase;
  color: #5c5c5c;
  font-size: 18px;
  text-decoration: none;
}

p a:hover {
  padding-bottom: 6px;
  border-bottom: 2px solid #f87531;
}

div p .orange-btn {
  position: relative;
  bottom: 5px;
  left: 230px;
  border: 1px solid #f87531;
  border-radius: 5px;
  color: white;
  margin-bottom: 5px;
  font-size: 13px;
  padding: 12px;
  background-color: #f87531;
}

div p .orange-btn:hover {
  background-color: #e06f35;
}

.main {
  box-shadow: 0 4px 2px -4px #5c5c5c;
  margin: 60px 66px;
  background-color: #f2f2f2;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-top: none;
  border-left: none;
  border-right: none;
}

th,
td {
  border-left: none;
  border-right: none;
  padding: 4px 0px;
  width: 33%;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  /*border: 1px solid black;*/
}

th {
  font-size: 20px;
  padding: 5px;
  font-weight: bolder;
}

tbody tr:hover {
  background-color: #f87531;
  cursor: default;
  color: white;
}

.day {
  width: 99%;
  color: #5c5c5c;
  text-align: center;
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 2px;
  background-color: #dddcdc;
}

.airing {
  background-color: #16c966;
}

.info {
  /*display: none;*/
}

tr+tr.info {
  color: #5c5c5c;
  visibility: collapse;
  height: 0px;
  /*opacity: 0;*/
  transition: height 0.3s linear, opacity 0.3s linear;
}

tr:hover+tr.info {
  border: 1px solid #f87531;
  height: 100px;
  opacity: 1;
  visibility: visible;
  display: table-row;
}

.info:hover {
  color: #5c5c5c;
  background-color: #f2f2f2;
  height: 100px;
  opacity: 1px;
  visibility: visible;
  display: table-row;
  border: 1px solid #f87531;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
   <table border="1">
      <thead>
         <tr>
            <th>Show name</th>
            <th>Season | Episode</th>
            <th>Day of Return</th>
         </tr>
      </thead>
      <tbody>
         <tr id="monday">
            <td class="day"colspan="3">
               Monday
            </td>
         </tr>
         <tr id="tuesday">
            <td class="day" colspan="3">
               Tuesday
            </td>
         </tr>
         <tr id="wednesday">
            <td class="day"  colspan="3">
               Wensday
            </td>
         </tr>
         <tr id="thursday">
            <td class="day" colspan="3">
               Thursday
            </td>
         </tr>
         <tr id="friday">
            <td class="day"  colspan="3">
               Friday
            </td>
         </tr>
         <tr class="airing" day="monday">
            <td>test1</td>
            <td>Test2</td>
            <td>Test3</td>
         </tr>
         <tr  class="info">
            <td colspan="3">show info here</td>
         </tr>
         <!--  -->
         <tr class="airing" day="monday">
            <td>test1</td>
            <td>Test2</td>
            <td>Test3</td>
         </tr>
         <tr  class="info">
            <td colspan="3">show info here</td>
         </tr>
         <!--  -->
         <tr day="tuesday">
            <td>arrow</td>
            <td>Test</td>
            <td>Test</td>
         </tr>
      </tbody>
   </table>
</div>