Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2017, 22:58
Интересующийся
Отправить личное сообщение для Fortun Посмотреть профиль Найти все сообщения от Fortun
 
Регистрация: 13.06.2013
Сообщений: 15

Сортировка элементов на странице.
Здравствуйте.
Есть таблица такого вида:
<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 и он все время выдает ошибку.
Прошу помощи.

Последний раз редактировалось Fortun, 11.03.2017 в 23:15.
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2017, 23:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

сортировка блоков в таблице
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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.03.2017, 00:08
Интересующийся
Отправить личное сообщение для Fortun Посмотреть профиль Найти все сообщения от Fortun
 
Регистрация: 13.06.2013
Сообщений: 15

Огромное спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Internet Explorer запретил выполнение сценариев и элементов ActiveX на этой странице Nailya Internet Explorer 2 02.12.2013 12:30
Кол-во элементов на странице Garro Общие вопросы Javascript 7 13.09.2013 11:59
Сортировка элементов страницы frutality jQuery 2 08.02.2013 14:24
Полная загрузка всех элементов на странице Serpanok jQuery 3 10.11.2011 20:29
Обход всех элементов на странице. lexnext1 Элементы интерфейса 0 08.11.2011 12:58