Javascript-форум - сортировка массива

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - сортировка массива (https://javascript.ru/forum/dom-window/64160-sortirovka-massiva.html)

gazman

23.07.2016 12:55

сортировка массива

здравствуйте. делаю сортировку таблицы.
добавляю отсортированные элементы в массив. задаю функцию сортировки. Но она не работает. сортирует не по порядку. мне нужно, чтобы было 1, 3, 11 и т.д. а функция работает так: 1, 11, 3
помогите, пожалуйста разобраться.

<table class="sort" id="sort" align="center">
	<tr id="zag">
		<td>ID</td>
		<td>Имя</td>
		<td>Фамилия</td>
		<td>Сайт</td>
		<td>Переключалка стилей</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Александр</td>
		<td>Шуркаев</td>
		<td><a href="#">htmlcoder.visions.ru</a></td>
		<td>Не-а</td>
	</tr>
	<tr>
		<td>123</td>
		<td>Пол</td>
		<td>Соуден</td>
		<td><a href="#">idontsmoke.co.uk</a></td>
		<td>Угу</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Джеффри</td>
		<td>Зельдман</td>
		<td><a href="#">zeldman.com</a></td>
		<td>Угу</td>
	</tr>
	<tr>
		<td>44</td>
		<td>Аарон</td>
		<td>Будман</td>
		<td><a href="#">youngpup.net</a></td>
		<td>Не-а</td>
	</tr>
	<tr>
		<td>11</td>
		<td>Глен</td>
		<td>Мерфи</td>
		<td><a href="#">glenmurphy.com</a></td>
		<td>Не-а</td>
	</tr>
	<tr>
		<td>15</td>
		<td>Даниель</td>
		<td>Боган</td>
		<td><a href="#">waferbaby.com</a></td>
		<td>Не-а</td>
	</tr>
	<tr>
		<td>33</td>
		<td>Ден</td>
		<td>Бенджамин</td>
		<td><a href="#">hivelogic.com</a></td>
		<td>Угу</td>
	</tr>

</table>

var table = document.getElementById("sort");
var zag = document.getElementById("sort").rows[0].cells;
var stroke = document.getElementById("sort").rows;


function perebor(zg)
{	
	for (i=0; i<zg.length; i++)
	{
		zg[i].onclick = function ()
		{
			index = this.cellIndex;
			cellRezult = [];
			
			function comp(a, b) {
				if (a > b) return 1;
				if (a < b) return -1;
			}
			
			for (i=1; i<table.rows.length; i++)
			{
				cellRezult[i-1] = [];
				cellRezult[i-1][0] = table.rows[i].getElementsByTagName("td").item(index).innerHTML;
				cellRezult[i-1][1] = table.rows[i];
			}
			
			cellRezult.sort(comp);
			
			for (i=0; i<cellRezult.length; i++)
			{
				table.appendChild(cellRezult[i][1]);
			}
		}
	}
	
}

perebor(zag);

Strongman

23.07.2016 13:27

Удали class="sort" в 1 строке:

<table class="sort" id="sort" align="center">

Или назови класс как-нибудь по-другому.

gazman

23.07.2016 13:50

спасибо

рони	23.07.2016 14:31

Цитата:

Сообщение от gazman

getElementsByTagName("td").item

Цитата:

Сообщение от gazman

function comp(a, b)

:-?

Strongman

23.07.2016 14:32

function comp(a, b)
{
if(+a[0] > +b[0]) return 1;
if(+a[0] < +b[0]) return -1;
}

рони	23.07.2016 15:05

Strongman,
тоже не верно

рони	23.07.2016 15:07

сортировка таблицы по клику на ячейку первой строки

gazman,
шифровка из центра ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<table class="sort" id="sort" align="center">
  <tr id="zag">
    <td>ID</td>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Сайт</td>
    <td>Переключалка стилей</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Александр</td>
    <td>Шуркаев</td>
    <td><a href="#">htmlcoder.visions.ru</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>123</td>
    <td>Пол</td>
    <td>Соуден</td>
    <td><a href="#">idontsmoke.co.uk</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Джеффри</td>
    <td>Зельдман</td>
    <td><a href="#">zeldman.com</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>44</td>
    <td>Аарон</td>
    <td>Будман</td>
    <td><a href="#">youngpup.net</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>11</td>
    <td>Глен</td>
    <td>Мерфи</td>
    <td><a href="#">glenmurphy.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>15</td>
    <td>Даниель</td>
    <td>Боган</td>
    <td><a href="#">waferbaby.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>33</td>
    <td>Ден</td>
    <td>Бенджамин</td>
    <td><a href="#">hivelogic.com</a></td>
    <td>Угу</td>
  </tr>

</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
    (function(f) {
        function g(c) {
            return function(b, a) {
                b = b.cells[c].textContent;
                a = a.cells[c].textContent;
                b = +b || b;
                a = +a || a;
                return b > a ? 1 : b < a ? -1 : 0
            }
        }
        var d = document.querySelector(f),
            e = [].slice.call(d.rows, 1);
        [].slice.call(d.rows[0].cells).forEach(function(c, b) {
            var a = 0;
            c.addEventListener("click", function() {
                e.sort(g(b));
                a && e.reverse();
                e.forEach(function(a) {
                    d.appendChild(a)
                });
                a ^= 1
            })
        })
    })(".sort")
});
</script>

</body>
</html>

Strongman

23.07.2016 17:44

Цитата:

Сообщение от рони (Сообщение 423159)

Strongman,
тоже не верно

- как не верно, все верно, все работает. Завидно, так и оскорбляешь меня теперь.

рони	23.07.2016 18:20

Цитата:

Сообщение от Strongman

все верно, все работает

где рабочий макет?

gazman

24.07.2016 21:53

рони,
спасибо. всё круто. разбираюсь в Вашем коде теперь))
а для моего варианта можно поправить? или всё безнадёжно?

рони	24.07.2016 22:00

gazman,
алгоритм моего кода ничем не отличается от вашего,просто правильно указаны данные и добавлена сортировка в обе стороны за счёт reverse

рони	24.07.2016 22:07

gazman,
изменены/добавлены строки 85,86, 94

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table class="sort" id="sort" align="center">
  <tr id="zag">
    <td>ID</td>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Сайт</td>
    <td>Переключалка стилей</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Александр</td>
    <td>Шуркаев</td>
    <td><a href="#">htmlcoder.visions.ru</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>123</td>
    <td>Пол</td>
    <td>Соуден</td>
    <td><a href="#">idontsmoke.co.uk</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Джеффри</td>
    <td>Зельдман</td>
    <td><a href="#">zeldman.com</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>44</td>
    <td>Аарон</td>
    <td>Будман</td>
    <td><a href="#">youngpup.net</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>11</td>
    <td>Глен</td>
    <td>Мерфи</td>
    <td><a href="#">glenmurphy.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>15</td>
    <td>Даниель</td>
    <td>Боган</td>
    <td><a href="#">waferbaby.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>33</td>
    <td>Ден</td>
    <td>Бенджамин</td>
    <td><a href="#">hivelogic.com</a></td>
    <td>Угу</td>
  </tr>

</table>
<script>
 var table = document.getElementById("sort");
var zag = document.getElementById("sort").rows[0].cells;
var stroke = document.getElementById("sort").rows;


function perebor(zg)
{
  for (i=0; i<zg.length; i++)
  {
    zg[i].onclick = function ()
    {
      index = this.cellIndex;
      cellRezult = [];

      function comp(a, b) {
         b = +b[0] || b[0];
         a = +a[0] || a[0];
        if (a > b) return 1;
        if (a < b) return -1;
      }

      for (i=1; i<table.rows.length; i++)
      {
        cellRezult[i-1] = [];
        cellRezult[i-1][0] = table.rows[i].getElementsByTagName("td").item(index).textContent;
        cellRezult[i-1][1] = table.rows[i];
      }

      cellRezult.sort(comp);

      for (i=0; i<cellRezult.length; i++)
      {
        table.appendChild(cellRezult[i][1]);
      }
    }
  }

}

perebor(zag);

</script>

</body>
</html>

gazman

25.07.2016 00:52

спасибо большое

gazman

27.07.2016 09:29

рони,
пожалуйста объясните, что означает запись в Вашем коде:
a && e.reverse();
и
a ^= 1

рони	27.07.2016 09:58

gazman,
a && e.reverse();
if(a == 1) e.reverse();
если второе нажатие изменить порядок сортировки
a ^= 1 это генератор 0 1 0 1 0 1 ... чётное нечётное нажатие

gazman

27.07.2016 10:08

спасибо
дорабатываю сортировку. хочу, чтобы в прямом и обратном направлении сортировало. Ваш код великолепно работает, но мне хочется научиться самому. я делаю проверку на наличие переменной, чтобы выбрать порядок сортировки. Но присутствует такой глюк. если я кликаю на один столбец, то сортирует в прямом порядке. а если сразу кликнуть на другой столбец, то сортируется предыдущий столбец в обратном порядке. нужно прогнать сортировку одного столбца туда и обратно, чтобы можно было сортировать другой.

var table = document.getElementById("sort");
var zag = document.getElementById("sort").rows[0].cells;
var stroke = document.getElementById("sort").rows;


function perebor(zg)
{	
	var up = 0;
	for (i=0; i<zg.length; i++)
	{
		zg[i].onclick = function ()
		{
			index = this.cellIndex;
			cellRezult = [];
			
			function comp(a, b) {
				b = +b[0] || b[0];
				a = +a[0] || a[0];
				if (a > b) return 1;
				if (a < b) return -1;
			}
			
			for (i=1; i<table.rows.length; i++)
			{
				cellRezult[i-1] = [];
				cellRezult[i-1][0] = table.rows[i].getElementsByTagName("td").item(index).textContent;
				cellRezult[i-1][1] = table.rows[i];
			}
			
			if (up == 0)
			{
				cellRezult.sort(comp);
				up = 1;
			}
			else 
			{
				cellRezult.reverse(comp);
				up = 0;
			}
			
			for (i=0; i<cellRezult.length; i++)
			{
				table.appendChild(cellRezult[i][1]);
			}
		}
	}
	
}

perebor(zag);

рони	27.07.2016 11:46

gazman,
внимание на строки 80 и 99

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table class="sort" id="sort" align="center">
  <tr id="zag">
    <td>ID</td>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Сайт</td>
    <td>Переключалка стилей</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Александр</td>
    <td>Шуркаев</td>
    <td><a href="#">htmlcoder.visions.ru</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>123</td>
    <td>Пол</td>
    <td>Соуден</td>
    <td><a href="#">idontsmoke.co.uk</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Джеффри</td>
    <td>Зельдман</td>
    <td><a href="#">zeldman.com</a></td>
    <td>Угу</td>
  </tr>
  <tr>
    <td>44</td>
    <td>Аарон</td>
    <td>Будман</td>
    <td><a href="#">youngpup.net</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>11</td>
    <td>Глен</td>
    <td>Мерфи</td>
    <td><a href="#">glenmurphy.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>15</td>
    <td>Даниель</td>
    <td>Боган</td>
    <td><a href="#">waferbaby.com</a></td>
    <td>Не-а</td>
  </tr>
  <tr>
    <td>33</td>
    <td>Ден</td>
    <td>Бенджамин</td>
    <td><a href="#">hivelogic.com</a></td>
    <td>Угу</td>
  </tr>

</table>
<script>
var table = document.getElementById("sort");
var zag = document.getElementById("sort").rows[0].cells;
var stroke = document.getElementById("sort").rows;


function perebor(zg)
{

  for (i=0; i<zg.length; i++)
  {
    var up = 0;
    zg[i].onclick = function ()
    {
      index = this.cellIndex;
      cellRezult = [];

      function comp(a, b) {
        b = +b[0] || b[0];
        a = +a[0] || a[0];
        if (a > b) return 1;
        if (a < b) return -1;
      }

      for (i=1; i<table.rows.length; i++)
      {
        cellRezult[i-1] = [];
        cellRezult[i-1][0] = table.rows[i].getElementsByTagName("td").item(index).textContent;
        cellRezult[i-1][1] = table.rows[i];
      }
      cellRezult.sort(comp);
      if (up == 0)
      {

        up = 1;
      }
      else
      {
        cellRezult.reverse(comp);
        up = 0;
      }

      for (i=0; i<cellRezult.length; i++)
      {
        table.appendChild(cellRezult[i][1]);
      }
    }
  }

}

perebor(zag);

</script>

</body>
</html>

gazman

27.07.2016 13:14

сердечно благодарю

Часовой пояс GMT +3, время: 02:09.