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++;
        }
     }
}
texte animate effects style 01

texte animate effects style 01

page scroll progress bar

page scroll progress bar

bootstrap4 tabs

bootstrap4 tabs

Texte Block Posts Style01

Texte Block Posts Style01

Nav Menu style02

Nav Menu style02

Loading Style snake

Loading Style snake

Input file style01

Input file style01

Form login et créer un compte style01

Form login et créer un compte style01

Form login 03

Form login 03

Card Profile Style01

Card Profile Style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire