Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2020, 16:35
Новичок на форуме
Отправить личное сообщение для Zabuza9090 Посмотреть профиль Найти все сообщения от Zabuza9090
 
Регистрация: 08.01.2020
Сообщений: 9

Сортировка динамической таблицы по столбцам
Не могу разобраться, как отсортировать созданную таблицу по возрастанию (по столбцу) заполнена рандомными числами при создании
Может кто подскажет как это реализовать.
<body>
    Число строк:
    <input id="str" type="text" value="" maxlength="3" size="10" onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);" /> 
    Число столбцов:
    <input id="slb" type="text" value="" maxlength="3" size="10" onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);" />
    <button id="create">Создать таблицу</button>
    <style>
      td {
        border: 1px solid black;
        width: 70px;
        height: 10px;
      }
    </style>
    <script type="text/javascript">
        function isright(obj)
        {
        if (obj.value>100) obj.value=100;
        if (obj.value<0) obj.value=0;
        }

      document.getElementById("create").onclick = function() {
        var a, b, tableElem, rowElem, colElem;
       
        a = document.getElementById("str").value;
        b = document.getElementById("slb").value;

        if (a == "" || b == "") {
          alert("Пожалуйста введите кол-во строк и столбцов от 0 до 100");
        } else {
          tableElem = document.createElement("table");

          for (var i = 0; i < a; i++) {
            rowElem = document.createElement("tr");

            for (var j = 0; j < b; j++) {
              colElem = document.createElement("td");
              colElem.innerHTML = [Math.round(Math.random()*100)];
              rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
          }

          document.body.appendChild(tableElem);
        }
      };
    </script>
  </body>
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2020, 17:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zabuza9090,
может для начала создать заголовки колонок для клика и сортировки.
алгоритм сортировки, нужен индекс кликнутой колонки, все строки которые необходимо отсортировать обьединить в массив, отсортировать по ячейке с нужным индексом, вставить обратно.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2020, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zabuza9090,
варианты решения
https://javascript.ru/forum/misc/758...i-tablicy.html
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2020, 17:33
Новичок на форуме
Отправить личное сообщение для Zabuza9090 Посмотреть профиль Найти все сообщения от Zabuza9090
 
Регистрация: 08.01.2020
Сообщений: 9

рони,
То есть без заголовка, при построении таблицы по нажатию и проверки заполнения рандома, реализовать проверку на больше или меньше чисел по индексу td никак?
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2020, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zabuza9090,
можно по любой ячейке. код из примеров выше практически тот же будет.
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2020, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zabuza9090,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
</head>
<body>
    Число строк:
    <input id="str" type="text" value="" maxlength="3" size="10" onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);" />
    Число столбцов:
    <input id="slb" type="text" value="" maxlength="3" size="10" onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);" />
    <button id="create">Создать таблицу</button>
    <style>
      td {
        border: 1px solid black;
        width: 70px;
        height: 10px;
      }
    </style>
    <script type="text/javascript">
        function isright(obj)
        {
        if (obj.value>100) obj.value=100;
        if (obj.value<0) obj.value=0;
        }

      document.getElementById("create").onclick = function() {
        var a, b, tableElem, rowElem, colElem;

        a = document.getElementById("str").value;
        b = document.getElementById("slb").value;

        if (a == "" || b == "") {
          alert("Пожалуйста введите кол-во строк и столбцов от 0 до 100");
        } else {
          tableElem = document.createElement("table");

          for (var i = 0; i < a; i++) {
            rowElem = document.createElement("tr");

            for (var j = 0; j < b; j++) {
              colElem = document.createElement("td");
              colElem.innerHTML = [Math.round(Math.random()*100)];
              rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
          }
          columnSorting(tableElem)
          document.body.appendChild(tableElem);
        }
      };
      function columnSorting(table)
      {  var sortingVector = {};
         table.addEventListener("click", ({target}) => {
                const {cellIndex : index} = target;
                const order = (sortingVector[index] = -(sortingVector[index] || -1));
                const collator = new Intl.Collator(["en", "ru"], {numeric: true});
                const comparator = (index, order) => (a, b) => order * collator.compare(
                    a.children[index].textContent,
                    b.children[index].textContent
                );
                table.append(...[...table.rows].sort(comparator(index, order)));
            });
            return table;
      }


    </script>
  </body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2020, 18:20
Новичок на форуме
Отправить личное сообщение для Zabuza9090 Посмотреть профиль Найти все сообщения от Zabuza9090
 
Регистрация: 08.01.2020
Сообщений: 9

рони,
Я попробовал реализовать через функцию сортировки по индексу tr
у тебя я так понял сортирует только ту колонку на которую нажать, я пытаюсь добиться того чтобы при заполнении все столбы сортировались одновременно, а не по той на которой кликнул пользователь, но не могу что бы он проходил по всей таблице а не только по 0 индексу
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    Число строк:
    <input
      id="str"
      type="text"
      value=""
      maxlength="3"
      size="10"
      onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);"
    />
    Число столбцов:
    <input
      id="slb"
      type="text"
      value=""
      maxlength="3"
      size="10"
      onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);"
    />
    <button id="create">Создать таблицу</button>
    <style>
      td {
        border: 1px solid black;
        width: 70px;
        height: 10px;
      }
    </style>
    <script type="text/javascript">
      function isright(obj) {
        if (obj.value > 100) obj.value = 100;
        if (obj.value < 0) obj.value = 0;
      }

      document.getElementById("create").onclick = function() {
        var a, b, tableElem, rowElem, colElem;

        a = document.getElementById("str").value;
        b = document.getElementById("slb").value;

        if (a == "" || b == "") {
          alert("Пожалуйста введите кол-во строк и столбцов от 0 до 100");
        } else {
          tableElem = document.createElement("table");
          tableElem.id = "tab";
          for (var i = 0; i < a; i++) {
            rowElem = document.createElement("tr");

            for (var j = 0; j < b; j++) {
              colElem = document.createElement("td");
              colElem.innerHTML = [Math.round(Math.random() * 100)];
              rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
          }

          document.body.appendChild(tableElem);

          let tb = document.querySelector("#tab");
          let trs = document.querySelectorAll("#tab tr");
          let button = document.querySelector("#create");

          let sorted = [...trs].sort(function(a, b) {
            return a.children[0].innerHTML - b.children[0].innerHTML;
          });
          tableElem.innerHTML = "";
          for (let tr of sorted) {
            tableElem.appendChild(tr);
            console.log([sorted]);
          }
        }
      };
    </script>
  </body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2020, 19:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Zabuza9090
пытаюсь добиться того чтобы при заполнении все столбы сортировались одновременно,
это как?
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2020, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zabuza9090,
возможно вы хотите колонки с убыванием сразу при создании?
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2020, 19:17
Новичок на форуме
Отправить личное сообщение для Zabuza9090 Посмотреть профиль Найти все сообщения от Zabuza9090
 
Регистрация: 08.01.2020
Сообщений: 9

рони,
Примерно так Таблица должна быть заполнена случайными целыми числами от 0 до 100, отсортированными по столбцам по возрастанию по клику создать, то есть как я понимаю в момент создания таблицы и заполнения числами отсортировать, у меня получается только по 1 столбцу а не по всей таблице
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сортировка таблицы при условии denis_kontarev Общие вопросы Javascript 3 26.09.2019 15:31
сортировка строк таблицы atanov Javascript под браузер 17 10.01.2018 18:10
Передача динамической таблицы в Excel j.r.r Общие вопросы Javascript 5 30.06.2013 22:26
Сортировка таблицы (даты) edmundantes Элементы интерфейса 4 17.05.2012 09:51
Сортировка таблицы, при помощи js Prizrak177 Общие вопросы Javascript 10 02.09.2010 12:17