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++;
        }
     }
}
up down tr in table with js

up down tr in table with js

login page green one

login page green one

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style03

Timeline style03

Input range slider HTML style02

Input range slider HTML style02

Image hover effects style

Image hover effects style

Image hover 07

Image hover 07

Header Aside Footer Admin

Header Aside Footer Admin

Form Step With B4 Style01

Form Step With B4 Style01

Form Création de compte style animée

Form Création de compte style animée

Card 4 Product Style01

Card 4 Product Style01

Arrows Defense Game

Arrows Defense Game