Change table ordering when clicking images in JS

Question

Change table ordering when clicking images in JS

Navigation

#1 by (0 votes)

0

Good afternoon I need to change the order of the table column to decreasing or increasing 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>

javascript

asked by anonymous 24.02.2016 / 21:03

1 answer

How to open Fancybox above the menu How to use a dynamic URL to receive PayPal notifications?

score 0 · Answer 1

If you are using jQuery you can use the link plugin

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

link
link

Repository: link

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script><scriptsrc="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>