Javascript to sort html elements

Question

I am trying to sort html elements in JS so that it looks like this

I have this when you hover over them, they expand with additional information, but only the last one in each line gets this function, and I can’t understand why (I tried for hours), if someone could help me, I would appreciate it.

I will send him the jsfiddle link and my js code bad post here so that it can read, and all the css / html / js code was on 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

I used jQuery .insertAfter after searching for the appropriate day. However, I noticed that you are relying on the next element, which should appear immediately after. So, I moved this element as well.

 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 pa { margin: 0px 0px 0px 65px; padding: 0px; display: inline; font-weight: bold; text-transform: uppercase; color: #5c5c5c; font-size: 18px; text-decoration: none; } pa: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> 

Answer 2

You do not call the sortElement function. add the following to the bottom of the script.

 sortElements();