Change table ordering by clicking on JS images

Question

Good afternoon I need to change the ordering of the table column to descending or crescent by clicking on the images. up and down.

<table border="1" width="140px" class="sortable">
    <tr>
        <td width="40%">ID <img src="img/icones/cima.png" width="9" height="10"  alt=""/><img src="img/icones/baixo.png" width="9" height="10"  alt=""/></td>
        <td width="60%">NOME <img src="img/icones/cima.png" width="9" height="10"  alt=""/><img src="img/icones/baixo.png" width="9" height="10"  alt=""/></td>
    </tr>
	<tr>
        <td width="40%">4</td>
        <td width="60%">João</td>
    </tr>
    <tr>
        <td width="40%">2</td>
        <td width="60%">Maria</td>
    </tr>
    <tr>
        <td width="40%">1</td>
        <td width="60%">Pedro</td>
    </tr>
    <tr>
        <td width="40%">3</td>
        <td width="60%">Antonia</td>
    </tr>
</table>

Answer 1

If you are using jQuery you can use the plugin http://tablesorter.com/docs/

Download the desired jquery and then download the jquery.tablesorter.min.js:

• http://jquery.com/download/
• https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.min.js

Repository: https://github.com/christianbach/tablesorter

I recommend using <th> table header pro and use <thead> and <tbody> to separate.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>

<script type="text/javascript">
$(function() {
	$(".sortable").tablesorter();
});
</script>

<table border="1" width="140px" class="sortable">
    <thead> 
    <tr>
        <th width="40%">ID <img src="img/icones/cima.png" width="9" height="10"  alt=""/><img src="img/icones/baixo.png" width="9" height="10"  alt=""/></th>
        <th width="60%">NOME <img src="img/icones/cima.png" width="9" height="10"  alt=""/><img src="img/icones/baixo.png" width="9" height="10"  alt=""/></th>
    </tr>
    </thead>

    <tbody>
	<tr>
        <td width="40%">4</td>
        <td width="60%">João</td>
    </tr>
    <tr>
        <td width="40%">2</td>
        <td width="60%">Maria</td>
    </tr>
    <tr>
        <td width="40%">1</td>
        <td width="60%">Pedro</td>
    </tr>
    <tr>
        <td width="40%">3</td>
        <td width="60%">Antonia</td>
    </tr>
    </tbody>
</table>