JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

<table>
    <tr class='head'>
        <td class='small'>&nbsp;</td>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
    <tr style='background-color:white'>
        <td class='small' onclick='moveUp(this);'>&#x25B2;</td>
        <td>Data 1.1</td>
        <td>Date 1.2</td>        
    </tr>
    <tr style='background-color:#eee'>
        <td class='small' onclick='moveUp(this);'>&#x25B2;</td>
        <td>Data 2.1</td>
        <td>Date 2.2</td>        
    </tr>
</table>

CSS

table {
   margin: 10px;
   width:100%;
}

table tr td {
    padding: 10px;
}

.small {
 width: 10px;
}
.head {
   background-color: #aaa;
   font-weight:bold;
}

JavaScript

function moveUp(cell) {   
    var tr_a = $(cell).up('tr');
    var tr_b = tr_a.previous('tr');

    if (!tr_b.match('tr.head')) {
        tr_b.replace(new Element('tr').update(tr_a.innerHTML).setStyle({
            backgroundColor: tr_b.getStyle('backgroundColor')
        }));
        tr_a.replace(tr_b.setStyle({
            backgroundColor: tr_a.getStyle('backgroundColor')
        }));
    }
}