Fatih Doğan Fatih Doğan - 6 months ago 10
jQuery Question

Get table cell value and alphabetically sorting

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>

Answer

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
}