Сортировка динамической таблицы по столбцам
Не могу разобраться, как отсортировать созданную таблицу по возрастанию (по столбцу) заполнена рандомными числами при создании
Может кто подскажет как это реализовать.
<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, время: 05:53. |