<table class='tbl_head01'>
<tr>
<td>...</td>
<td>
<div href="#" class="tr_up">↑</div>
<div href="#" class="tr_dn">↓</div>
</td>
</tr>
</table>



<script>
    $(".tr_up,.tr_dn").click(function(e){
e.preventDefault();
        var row = $(this).parents("tr:first");
        if ($(this).is(".tr_up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
//선택한 줄에 색상 변경하기
$('.tbl_head01 tr').removeClass('tr_on');
row.addClass('tr_on');
    });
</script>

<style>

.tbl_head01 .tr_on td,.tbl_head01 .tr_on td a {
    /* border:3px solid #b8bfc4 !important; */
color:red;
}

.tbl_head01 tr,.tbl_head01 td {
position: relative;
}
.tbl_head01 .tr_up,.tbl_head01 .tr_dn {
cursor:pointer;
    position: absolute;
    right: 0px;
    width: 30px;
height:30px;
background: rgba(0,0,0,0.1);
justify-content: center;
align-items: center;
}
.tbl_head01 .tr_up:hover,.tbl_head01 .tr_dn:hover {
background: #333;
color:#FFF;
}

.tbl_head01 .tr_up {top: 0px;}
.tbl_head01 .tr_dn {bottom: 0px;}
</style>