Сортировка HTML-элементов в Javascript

Question

Я пытаюсь отсортировать элементы html в JS, чтобы это выглядело так:

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

Я опубликую ссылку на 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);
            }
        }
    }
}

javascript jquery html css

3

user8236024 14 Мар 2018 в 09:07

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>

0

Neil 14 Мар 2018 в 06:21

Answer 2

Вы не вызываете функцию sortElement. добавьте следующее внизу вашего скрипта.

sortElements();

0

Emon 14 Мар 2018 в 06:24

Сортировка HTML-элементов в Javascript

2 ответа

Похожие вопросы

Новые вопросы

javascript