У меня проблемы с созданием таблицы Dynami c? - PullRequest
Новая
       44

У меня проблемы с созданием таблицы Dynami c?

1 голос
/ 20 января 2020

Для исследовательского проекта мне нужно создать динамическую таблицу c, используя JavaScript. Я попросил некоторых друзей о помощи, но так как я не являюсь компьютерным ученым (или кем-то в этом направлении), я знаю только, что хорошо использовать AJAX и DOM. И используя следующий javascipt (src = w3schools and stack)

проблема это сортировка, но она не в алфавитном или числовом формате. Это может быть URL с картинки, включенной в один столбец таблицы, но для меня это выглядит случайным.

как мне создать динамическую c рабочую таблицу сортировки ?? 

<table id="phones">
    <thead>
        <th><h2>Brand<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>IMG</h2></th>
        <th><h2>Model<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Os<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Screensize<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Price<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th> 
    </thead>  ``` 

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById('phones');
  switching = true;

  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
       }
    }
    if (shouldSwitch) {      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
          }
  }
}

1 Ответ

0 голосов
/ 20 января 2020

getElementsByTagName("TD")[0] означает доступ к элементу first TD, но вам не всегда нужен первый. Вместо этого вам нужно добавить colNum параметр , который можно использовать для ввода другого числа в те квадратные скобки, которые вы определяете при вызове функции. Вы также захотите рассматривать сортировку чисел иначе, чем сортировку по алфавиту. Когда вы рассматриваете числа как строки, они сортируются по-разному, как показано здесь: 

console.log( ["19", "20", "3", "35", "1", "25", "300"].sort() );

Итак, добавьте второй параметр, в котором вы сообщаете функции, должна ли она использовать алфавитную или числовую сортировку. Затем в функции определите параметр и выполните соответствующую сортировку следующим образом: 

function sortTable(colNum, sortType) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("phones");
  switching = true;

  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[colNum];
      y = rows[i + 1].getElementsByTagName("TD")[colNum];
      if (sortType == "alphabetical") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
<table id="phones">
  <tr>
    <th><button onclick="sortTable(0, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(1, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(2, 'numerical');">Sort this column</button></th>
  </tr>
  <tr>
    <td>C</td>
    <td>A</td>
    <td>100</td>
  </tr>
  <tr>
    <td>D</td>
    <td>Z</td>
    <td>1</td>
  </tr>
  <tr>
    <td>E</td>
    <td>D</td>
    <td>19</td>
  </tr>
  <tr>
    <td>A</td>
    <td>C</td>
    <td>55</td>
  </tr>
</table>
...