Revisions to Sorting an HTML table with JavaScript

Added missing closing bracket and some pointless edits to get around this stupid min 6 character change limit

Source Link

edit approved Feb 17, 2016 at 12:29

1

    // Table data sorting starts....
    function sortData() {
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 
       
        for(var i = 0; i < rowData.length - 1; i++) {
            for(var j = 0; j < rowData.length - (i + 1); j++) {

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)) {
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    // Table data sorting starts....
    function sortData(){
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 
       
        for(var i = 0; i < rowData.length - 1; i++){
            for(var j = 0; j < rowData.length - (i + 1); j++{

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)){
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    // Table data sorting starts....
    function sortData() {
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 
       
        for(var i = 0; i < rowData.length - 1; i++) {
            for(var j = 0; j < rowData.length - (i + 1); j++) {

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)) {
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

<table id="data_table" width="200" border="1">
    <tbody>
    <tr>
        <td width="100">01</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>04</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td>05</td>
        <td>eee</td>
    </tr>
    <tr>
        <td>03</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>02</td>
        <td>bbb</td>
    </tr>
    <tr>
        <td>06</td>
        <td>fff</td>
    </tr>
    </tbody>
</table>

<table id="data_table" width="200" border="1">
    <tbody>
    <tr>
        <td width="100">01</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>02</td>
        <td>bbb</td>
    </tr>
    <tr>
        <td>03</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>04</td>
        <td>ddd</td>
    </tr>
    <tr>
        <td>05</td>
        <td>eee</td>
    </tr>
    <tr>
        <td>06</td>
        <td>fff</td>
    </tr>
    </tbody>
</table>

added 64 characters in body

Source Link

edited Dec 24, 2013 at 4:41

Airan

141
3

Here is demo.

HTML Table:

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

[Here is demo][1]. [1]: http://jsfiddle.net/QZ3t4/2/

Here is demo.

HTML Table:

    <table id="data_table" width="200" border="1">
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
    </table>

    <table id="data_table" width="200" border="1">
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
    </table>

HTML Table:

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

[Here is demo][1]. [1]: http://jsfiddle.net/QZ3t4/2/

Pure js code for shorting

Source Link

edited Dec 22, 2013 at 11:09

Airan

141
3

Here is the Jquerypure JS for sorting table data. I used first column which holds numbers. You have to modify column index and condition statement as per your requirements. I hope that solves your problem...

    $(document).ready(function(){
        
        // Table data sorting starts....
        $('input#short_data').click(function sortData(){
            //Data table object
Read table body node.
        var $dataTabletableData = $document.getElementById('table#data_table''data_table').getElementsByTagName('tbody').item(0);

            //Data Read table row lengthnodes.
           var $dataRowsrowData = $dataTabletableData.findgetElementsByTagName('tr').length;

            //Data table short column; index
            $sortColumn = 0;

            // Outer loop for N-1 times
            for(var i = 0; i < parseInt($dataRows)rowData.length - 1; i++){
            
                // Inner loop for rest of unsorted list
                for(var j = 0; j < ( parseInt($dataRows)rowData.length - (i -+ 1); j++){
                    
                    // read (j)th and (j+t) rows
                    $firsRow = $dataTable.find('tr').eq(j);
                    $secondRow = $dataTable.find('tr').eq(j+1);

                 Swap row nodes //if (j)th row is greatershort thancondition (j+1)th.matches
                    if( parseInt( $firsRowrowData.finditem('td'j).eqgetElementsByTagName($sortColumn'td').textitem(0) .innerHTML) > parseInt( $secondRowrowData.finditem('td'j+1).eqgetElementsByTagName($sortColumn'td').textitem(0) .innerHTML) ){
                        // Swap rows..tableData.insertBefore(rowData.
                        $firsRowitem(j+1),rowData.insertAfteritem($secondRowj));
                    }
                }
                //End of inner loop
            }
            //End of outer loop
        });
        // Table data sorting ends....
    });

Here is demo.

Here is the Jquery for sorting table data. I used first column which holds numbers. You have to modify column index and condition statement as per your requirements. I hope that solves your problem...

    $(document).ready(function(){
        
        // Table data sorting starts....
        $('input#short_data').click(function(){
            //Data table object
            $dataTable = $('table#data_table');

            //Data table row length
            $dataRows = $dataTable.find('tr').length;

            //Data table short column index
            $sortColumn = 0;

            // Outer loop for N-1 times
            for(var i = 0; i < parseInt($dataRows) - 1; i++){
            
                // Inner loop for rest of unsorted list
                for(var j = 0; j < ( parseInt($dataRows) - i - 1); j++){
                    
                    // read (j)th and (j+t) rows
                    $firsRow = $dataTable.find('tr').eq(j);
                    $secondRow = $dataTable.find('tr').eq(j+1);

                    //if (j)th row is greater than (j+1)th.
                    if( parseInt( $firsRow.find('td').eq($sortColumn).text() ) > parseInt( $secondRow.find('td').eq($sortColumn).text() ) ){
                        // Swap rows....
                        $firsRow.insertAfter($secondRow);
                    }
                }
                //End of inner loop
            }
            //End of outer loop
        });
        // Table data sorting ends....
    });

Here is the pure JS for sorting table data. I used first column which holds numbers. You have to modify column index and condition statement as per your requirements. I hope that solves your problem...

    // Table data sorting starts....
    function sortData(){
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 
       
        for(var i = 0; i < rowData.length - 1; i++){
            for(var j = 0; j < rowData.length - (i + 1); j++{

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)){
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

Here is demo.

Post Migrated Here from stackoverflow.com (revisions)

occurred Dec 17, 2013 at 22:19

Source Link

created Dec 17, 2013 at 11:29

BwithLove

141
3

Loading

Stack Exchange Network

Return to Answer