Форум

Роман1479 · #1 (**permalink**) 29.10.2018, 10:48

Помогите пожалуйста перевести в обычный вид ( в обычный javascript или объяснить ) ничего не понимаю что здесь происходит, но работает

<table cellpadding="7" align="center">
 	<tr><th onclick="sort_age();">SORT AGE</th></tr>
	 <tbody id="table1">
		 <tr><td>28</td></tr>
		 <tr><td>36</td></tr>
		 <tr><td>21</td></tr>
		 <tr><td>34</td></tr>
		 <tr><td>14</td></tr>
		 <tr><td>24</td></tr>
	 </tbody>
</table>

function sort_age() {
 	var tbody = $('#table1'); // берем таблицу

	 	tbody.find('tr').sort(function(a, b){ 
			 	return $('td:last', a).text().localeCompare($('td:last', b).text());
		}).appendTo(tbody);
}

Прошу объяснить функцию в js, и если не трудно написать её для более менее новичков, спасибо большое буду благодарен

ksa · #2 (**permalink**) 29.10.2018, 12:13

Сообщение от Роман1479

Прошу объяснить функцию в js

https://javascript.ru/array/sort

Про localeCompare() смотри тут
https://msdn.microsoft.com/ru-ru/lib...(v=vs.94).aspx
https://javascript.ru/String

Dilettante_Pro · #3 (**permalink**) 29.10.2018, 12:51

И еще - в данном конкретном случае лишнее 'td:last', т.к. в каждой строке по одной ячейке.

рони · #4 (**permalink**) 29.10.2018, 14:06

Сообщение от Роман1479

но работает

если нужно сортировать числа, то не работает!!!

вариант для сортровки чисел

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<table cellpadding="7" align="center">
 	<tr><th onclick="sort_age();">SORT AGE</th></tr>
	 <tbody id="table1">
		 <tr><td>8</td></tr>
		 <tr><td>36</td></tr>
		 <tr><td>21</td></tr>
		 <tr><td>34</td></tr>
		 <tr><td>14</td></tr>
		 <tr><td>24</td></tr>
	 </tbody>
</table>
  <script>
     function sort_age() {
 	var tbody = $('#table1'); // берем таблицу

	 	tbody.find('tr').sort(function(a, b){
			 	return $(a).text() - $(b).text();
		}).appendTo(tbody);
}

  </script>
</body>
</html>

рони · #5 (**permalink**) 29.10.2018, 14:13

Роман1479,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
<table cellpadding="7" align="center">
 	<tr><th onclick="sort_age();">SORT AGE</th></tr>
	 <tbody id="table1">
		 <tr><td>8</td></tr>
		 <tr><td>36</td></tr>
		 <tr><td>21</td></tr>
		 <tr><td>34</td></tr>
		 <tr><td>14</td></tr>
		 <tr><td>24</td></tr>
	 </tbody>
</table>
  <script>
function sort_age() {
 	var tbody = $('#table1'); // берем таблицу

	 	tbody.find('tr').sort(function(a, b){
			 	return $('td:last', a).text().localeCompare($('td:last', b).text(), "ru", {numeric : true});
		}).appendTo(tbody);
}

  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript