@Kartonka
Люблю демократию

Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?

6622eb08d119d650582956.png
<html>
  <head>
    <meta charset="utf-8" />
    <title>БД</title>
    <link rel="stylesheet" type="text/css" href="1.css">
  </head>
  <body style="background-color:#095749;">
  
    <br><div class="A">
      <div id="a" class="component"><p>12.11.1967</p></div>
      <div id="aa" class="component"><p>Льоня</p></div>
  </div>

<br><div class="B">
      <div id="b" class="component"><p>04.03.1967</p></div>
      <div id="bb" class="component"><p>Настя</p></div>
  </div>

  <br><div class="C">
      <div id="c" class="component"><p>28.04.2019</p></div>
      <div id="cc" class="component"><p>Макс</p></div>
  </div>

<br><div class="D">
      <div id="d" class="component"><p>11.02.1926</p></div>
      <div id="dd" class="component"><p>Витя</p></div>
  </div>

<br><div class="E">
      <div id="e" class="component"><p>02.04.1960</p></div>
      <div id="ee" class="component"><p>Даша</p></div>
  </div>

  </body>
</html>

p {
  text-align: center;
}

.A, .B, .C, .D, .E {
  display: inline-block; /* Делаем компоненты A, B, C, D, E инлайн-блоками */
  vertical-align: top; /* Выравниваем их по верхнему краю */
  margin-left: 20px; /* Добавляем отступ слева */
}

#a, #aa, #b, #bb, #c, #cc, #d, #dd, #e, #ee {
  display: inline-block; /* Делаем элементы внутри блоков инлайн-блоками */
}

#a, #b, #c, #d, #e {
  width: 80px;
  border: 2px solid black;
  margin: 3px;
  background-color: yellow;
}

#aa, #bb, #cc, #dd, #ee {
  width: 350px;
  background-color: blue;
  border: 2px solid black;
}
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 1
@psiklop
Так не делают, раз страница динамическая.
Имена и дату надо загнать в массив.
Написать функции сортировки и динамической рисовки таблицы.
Например как-нибудь так начал бы делать я:

let names = [["2000-04-28","Макс"],["1967-11-12","Даня"],["1967-03-04","Настя"]];

function update_table() {

	// сортируем по дате
	names = names.sort((a, b)=>Date.parse(b[0])-Date.parse(a[0]));
	
	// строки для таблицы
	let html = "";
	names.forEach(([d, n])=>{
		html += "<tr><td>"+d+"</td><td>"+n+"</td></tr>";
	});
	
	return html;
}
	
// вызываем функцию update_table после изменения names и вообще когда нам надо 
console.log(update_table());


P.S. В коде много классов и айдишников - врядли они вообще нужны, тем более уникальные.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы