Сортировка динамической таблицы по столбцам
Не могу разобраться, как отсортировать созданную таблицу по возрастанию (по столбцу) заполнена рандомными числами при создании
Может кто подскажет как это реализовать. <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> |
Zabuza9090,
может для начала создать заголовки колонок для клика и сортировки. алгоритм сортировки, нужен индекс кликнутой колонки, все строки которые необходимо отсортировать обьединить в массив, отсортировать по ячейке с нужным индексом, вставить обратно. |
|
рони,
То есть без заголовка, при построении таблицы по нажатию и проверки заполнения рандома, реализовать проверку на больше или меньше чисел по индексу td никак? |
Zabuza9090,
можно по любой ячейке. код из примеров выше практически тот же будет. |
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> |
рони,
Я попробовал реализовать через функцию сортировки по индексу 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> |
Цитата:
|
Zabuza9090,
возможно вы хотите колонки с убыванием сразу при создании? |
рони,
Примерно так Таблица должна быть заполнена случайными целыми числами от 0 до 100, отсортированными по столбцам по возрастанию по клику создать, то есть как я понимаю в момент создания таблицы и заполнения числами отсортировать, у меня получается только по 1 столбцу а не по всей таблице |
Часовой пояс GMT +3, время: 22:04. |