Menu
I created a table. Firstly I get td values of second column with a button. I send values to array. Later I call sorting function and I want to write sorted values to td value of second column. Where is my mistake? Also is there any different way?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Sort" id="sort"></input>
<table cellpadding="1" cellspacing="1" id="mytable" border="1">
<tr>
<td>Coby</td>
<td>Vanna</td>
<td>Balurghat</td>
</tr>
<tr>
<td>Arsenio</td>
<td>Ignacia</td>
<td>Tramutola</td>
</tr>
<tr>
<td>Kenneth</td>
<td>Gretchen</td>
<td>Penhold</td>
</tr>
<tr>
<td>Aquila</td>
<td>Breanna</td>
<td>Liverpool</td>
</tr>
<tr>
<td>Dane</td>
<td>Isadora</td>
<td>Silverton</td>
</tr>
<tr>
<td>Jerry</td>
<td>Mari</td>
<td>Thon</td>
</tr>
<tr>
<td>Kareem</td>
<td>Courtney</td>
<td>Senneville</td>
</tr>
<tr>
<td>Fulton</td>
<td>Karen</td>
<td>Berloz</td>
</tr>
<tr>
<td>Quamar</td>
<td>Quon</td>
<td>Zamora</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
$("#sort").click(function(){
$('#mytable tr').each(function() {
var arr=[];
var x = $(this).find("td").eq(1).text();
arr.push(x);
SortElements();
});
})
function SortElements() {
arr.sort(alphabetical);
alert(arr);
}
function alphabetical(a, b)
{
var A = a.toLowerCase();
var B = b.toLowerCase();
if (A < B){
return -1;
}else if (A > B){
return 1;
}else{
return 0;
}
}
</script>
</body>
</html>
255
A few things: You are not actually writing anything back into the table in the code you posted.
SortElements() is called every time you read a value from another <tr>. Just collect all the values first, and after finishing the $('#mytable tr').each() loop, calll SortElements() once.
You are deleting your arr on every iteration inside the $('#mytable tr').each() by doing var arr=[];. Do that once before the loop.
$("#sort").click(function(){
var arr = [];
$('#mytable tr').each(function() {
var x = $(this).find("td").eq(1).text();
arr.push(x);
}).promise().done(function(){
arr = sort_elements(arr);
var i = 0;
// Simply loop again and insert the object with
// that index.
$('#mytable tr').each(function() {
$(this).find("td").eq(1).text(arr[i++]);
});
});
});
Use the $(elem).each().promise().done() construct to make the each() method then-able (see this answer).
And your sort_elements receives the arr as an argument
function sort_elements(arr) {
arr.sort(alphabetical);
return arr
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
