3

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>
Fatih Doğan
  • 417
  • 1
  • 4
  • 16

1 Answers1

1

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
}
Community
  • 1
  • 1
C14L
  • 12,153
  • 4
  • 39
  • 52