Javascript: Shuffle Table Rows
Is there a possibility to shuffle table rows and make them appear at random each time we click a button/icon (except for the first one with a header)? Something like w3schools' 'Ho
Solution 1:
You can do the following:
- Get all of the rows of the table using lookups like
document.getElementsByTagName
or if you want to have a bit more specificity -document.querySelectorAll
. - These return an
HTMLCollection
, so you can just convert it into an array. - Shuffle the array.
- Add it back to the table - since a node cannot appear twice in the DOM, that will move them, thus you don't have to manually remove them first.
functionsortTable() {
//get the parent table for conveniencelet table = document.getElementById("myTable");
//1. get all rowslet rowsCollection = table.querySelectorAll("tr");
//2. convert to arraylet rows = Array.from(rowsCollection)
.slice(1); //skip the header row//3. shuffleshuffleArray(rows);
//4. add back to the DOMfor (const row of rows) {
table.appendChild(row);
}
}
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
* from: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array/12646864#12646864
*/functionshuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
.table-div {
padding-top: 1rem;
}
<divclass="table-div"><tableid="myTable"><tr><thclass="button"><buttonclass="my-btn"type="button"onclick="sortTable()">
shuffle</button></th><th>Text:</th><th></th></tr><tr><tdclass="left">Some text 1</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 2</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 3</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 4</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 5</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 6</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr><tr><tdclass="left">Some text 7</td><td><inputtype="text"></td><tdclass="right">more text.</td><tdclass="button"><buttonclass="my-btn"type="button">
check</button></td></tr>
Solution 2:
Well, as far I could help without making all your code, is to get you going with a simple and legible logic...
Like you said, you want to shuffle the rows, so, for that you need to get all your rows. You can do it with var tableElms = document.getElementById("myTable").children;
and filter it to get only the rows that you want.
After that you can create a list with the results and then sort it with var sortedList = filteredList.sort();
after that change your table dom (clean it) and append the new rows document.getElementById('myTable').appendChild(sortedList);
Hope I could help you :)
Post a Comment for "Javascript: Shuffle Table Rows"