таблица не перебирается

Question

let arr = Array.from(document.querySelector('#grid').rows)
document.querySelector('#grid').addEventListener('click', event =>{
   if(event.target.dataset.type == 'number'){
      arr.forEach( item => {
         if(item.rowIndex > 0){
           
            arr.sort(() => {
               item.cells[0].firstChild.data > item.cells[0].firstChild.data
            })
            
         }
      }) 
   }
})

table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 4px;
  }
  th {
    cursor: pointer;
  }
  th:hover {
    background: yellow;
  }

  <table id="grid">
    <thead>
      <tr>
        <th data-type="number">Возраст</th>
        <th data-type="string">Имя</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>Вася</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Петя</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Женя</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Маша</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Илья</td>
      </tr>
    </tbody>
  </table>

Как сделать чтобы было форматирование по возрасту от меньшего к большому и по имени от А до Я ?

Answer 1

Направление верное. Для успешного решения задачи нам нужно:

Не забыть удалить первую строку с заголовком
Определить функцию для перестроения строк-элементов таблицы в DOM
При нажатии на заголовке определить индекс колонки таблицы
В соответствии с типом колонки вызвать соответствующую функцию сортировки
Перестроить DOM

Для сравнения строк лучше воспользоваться методом localeCompare, который возвращает -1, 1 или 0. Числа сравниваем классическим способом.

let gridElement = document.querySelector('#grid');
let arr = Array.from(gridElement.rows);

arr.shift();

const rearrange = () => {
  for (var i = 0; i < arr.length; i++) arr[i].parentNode.appendChild(arr[i])
};

gridElement.addEventListener('click', event => {

  let cellIndex = event.target.cellIndex;

  if (event.target.dataset.type == 'number') {
    arr.sort((e1, e2) => {
      let a = parseFloat(e1.cells[cellIndex].innerText);
      let b = parseFloat(e2.cells[cellIndex].innerText);

      return a - b;
    });
  } else {
    arr.sort((e1, e2) => {
      let a = e1.cells[cellIndex].innerText.toLowerCase();
      let b = e2.cells[cellIndex].innerText.toLowerCase();

      return a.localeCompare(b);
    });
  }

  rearrange();
})

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px;
}

th {
  cursor: pointer;
}

th:hover {
  background: yellow;
}

<table id="grid">
  <thead>
    <tr>
      <th data-type="number">Возраст</th>
      <th data-type="string">Имя</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>5</td>
      <td>Вася</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петя</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Женя</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Маша</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Илья</td>
    </tr>
  </tbody>
</table>

Код можно усовершенствовать, чтобы не делать бессмысленных сортировок/перестроений.

БЛОГ НА HUSL

таблица не перебирается

Ответы (1 шт):