up down tr in table with js

<!DOCTYPE html>
<html>
<head>
    <title>UP DOWN TR IN TABLE WITH JS | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="UP DOWN TR IN TABLE WITH JS">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" />
</head>
<body class="container-fluid mt-5">
<h2 class="text-center text-info">Change position of tr in table with JS</h2>
<div class="table-responsive pt-3">
<table id="table" class="table table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>JOB</th>
                <th>Country</th>
                <th>UP / DOWN</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mezgani said</td>
                <td>Developer full-stack</td>
                <td>Maroc</td>
                <td>
					<a onclick="upNdown('up');"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></a>
					<a onclick="upNdown('down');"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a>				
				</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Saadia sadqi</td>
                <td>Employe</td>
                <td>France</td>
                <td>
					<a onclick="upNdown('up');"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></a>
					<a onclick="upNdown('down');"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a>				
				</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Idrissi Rachida</td>
                <td>RH</td>
                <td>Qatar</td>
                <td>
					<a onclick="upNdown('up');"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></a>
					<a onclick="upNdown('down');"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a>				
				</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Mohssini Oumaima</td>
                <td>Administrator</td>
                <td>Maroc</td>
                <td>
					<a onclick="upNdown('up');"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></a>
					<a onclick="upNdown('down');"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a>				
				</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Farihi Houda</td>
                <td>Graphic</td>
                <td>Canada</td>
                <td>
					<a onclick="upNdown('up');"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></a>
					<a onclick="upNdown('down');"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a>				
				</td>
            </tr>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

thead{
    background: orange;
    color: #FFF;
    font-weight: bold;
}

tr{cursor: pointer}
    
.selected{
    background-color: #dee2e6; 
    font-weight: bold;
}

a{
    margin-top:10px;
    font-weight: bold;
    font-size: 25px;
    cursor: pointer;
}
var index;  // variable to set the selected row index
function getSelectedRow()
{
    var table = document.getElementById("table");
    for(var i = 1; i < table.rows.length; i++)
    {
        table.rows[i].onclick = function()
        {
            // clear the selected from the previous selected row
            // the first time index is undefined
            if(typeof index !== "undefined"){
                table.rows[index].classList.toggle("selected");
            }
           
            index = this.rowIndex;
            this.classList.toggle("selected");

        };
    }
        
}


getSelectedRow();


function upNdown(direction)
{
    var rows = document.getElementById("table").rows,
        parent = rows[index].parentNode;
     if(direction === "up")
     {
         if(index > 1){
            parent.insertBefore(rows[index],rows[index - 1]);
            // when the row go up the index will be equal to index - 1
            index--;
        }
     }
     
     if(direction === "down")
     {
         if(index < rows.length -1){
            parent.insertBefore(rows[index + 1],rows[index]);
            // when the row go down the index will be equal to index + 1
            index++;
        }
     }
}
toggle switch style02

toggle switch style02

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style05

Timeline style05

Timeline style03

Timeline style03

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Pie Charts

Pie Charts

Input file style01

Input file style01

Geocoded Locations

Geocoded Locations

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Carousel 8 bloc with B4

Carousel 8 bloc with B4