JSFiddle - React, Tailwind, and code Playground

by aleation

HTML

<table id="selReporterList" cellspacing="0" cellpadding="5" border="1" style="border-collapse: collapse;">
    <tr class="nameMail" bgcolor="#EAEAEA"  >
        <td>reporter</td>
        <td>email</td>
    </tr>
    <tr class="nameMail">
        <td value='a'>a</td>
        <td value='b'>b</td>
    </tr>
    <tr class="nameMail">
        <td value='c'>c</td>
        <td value='d'>d</td>
    </tr>
    <tr class="nameMail">
        <td value='e'>e</td>
        <td value='f'>f</td>
    </tr>
    <tr class="nameMail">
        <td value='g'>g</td>
        <td value='h'>h</td>
    </tr>
    <tr class="nameMail">
        <td value='i'>i</td>
        <td value='j'>j</td>
    </tr>
    <tr class="nameMail">
        <td value='k'>k</td>
        <td value='l'>l</td>
    </tr>
    <tr class="nameMail">
        <td value='m'>m</td>
        <td value='n'>n</td>
    </tr>
    <tr class="nameMail">
        <td value='o'>o</td>
        <td value='p'>p</td>
    </tr>
    <tr class="nameMail">
        <td value='q'>q</td>
        <td value='r'>r</td>
    </tr>
</table>

<input type="button" class="move up" value="▲" />
<input type="button" class="move down" value="▼"/>

CSS

.selected{background: #7f7;}

JavaScript

var total = $('#selReporterList tr').size(); // Total rows of the table

// With not(:first-child) you avoid selecting the table header, instead of having that row disabled, which looked weird.
$('#selReporterList tr:not(:first-child)').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

//We bind the click to the move buttons
//Calling a script from the href is wrong and ugly
//Normally it should be from onClick="javascript:...
//But I like to bind it like this because it looks clearer/cleaner to me  
$('.move').click(function(){
    var obj = $('.selected'); //We get the selected item
        var idx = $(obj).index(); //And its DOM index

    //This is the pretty part, look how easy it is with jQuery:
        if($(this).hasClass('up') && idx > 1) $(obj).prev().before(obj);

    if($(this).hasClass('down')) $(obj).next().after(obj);
});