Форум

Fortun · #1 (**permalink**) 11.03.2017, 22:58

Здравствуйте.
Есть таблица такого вида:

<body>
  <table>
    <tr>
      <td>
       <section class="thumb-block">
        <div>Block <sup class="count">7</sup></div>
			<p>кучка какого то текста</p>
        </section>
      </td>
    </tr>
    <tr>
      <td>
      <section class="thumb-block">
      	<div>Block <sup class="count">3</sup> </div>
       <p>вторая кучка какого то текста</p>
        </section>
      </td>
    </tr>
        <tr>
      <td>
      <section class="thumb-block">
      	<div>Block <sup class="count">9</sup> </div>
       <p>третья кучка какого то текста</p>
        </section>
      </td>
    </tr>
  </table>
  <button onclick="chg()">Click</button>
</body>

Я хочу, чтобы по нажатию на кнопку брались данные из "count", сортировались, а потом блоки "thumb-block" на странице упорядочивались по убыванию, но увы, знаний мне катастрофически не хватает.
Я уверен, что нужно использовать appendChild, innerHTML и sort, но как правильно применить их я придумать не смог. Все на что меня хватило это:

function chg(){
var num = document.querySelectorAll(".count");
var block = document.querySelectorAll(".thumb-block");
for(i=0;i<num.length;i++){
console.log(parseInt(num[i].innerText));
	}
}

К своему стыду я даже не смог правильно применить sort и он все время выдает ошибку.
Прошу помощи.

рони · #2 (**permalink**) 11.03.2017, 23:48

Fortun,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 function chg() {
    var thumb = document.querySelectorAll(".thumb-block");
    thumb = [].slice.call(thumb, 0);
    var parent = thumb.map(function(el) {
        return el.parentNode
    });
    thumb.sort(function(a, b) {
        return b.querySelector(".count").textContent - a.querySelector(".count").textContent
    }).forEach(function(el, i) {
        parent[i].appendChild(el)
    })
};
  </script>
</head>

<body>
  <table>
    <tr>
      <td>
       <section class="thumb-block">
        <div>Block <sup class="count">7</sup></div>
      <p>кучка какого то текста</p>
        </section>
      </td>
    </tr>
    <tr>
      <td>
      <section class="thumb-block">
      	<div>Block <sup class="count">3</sup> </div>
       <p>вторая кучка какого то текста</p>
        </section>
      </td>
    </tr>
        <tr>
      <td>
      <section class="thumb-block">
      	<div>Block <sup class="count">9</sup> </div>
       <p>третья кучка какого то текста</p>
        </section>
      </td>
    </tr>
  </table>
  <button onclick="chg()">Click</button>


</body>

</html>

Fortun · #3 (**permalink**) 12.03.2017, 00:08

Огромное спасибо!

Форум

Справочник

Discord чат

Курсы javascript