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 style03

toggle switch style03

Vidéo background en html5 style02

Vidéo background en html5 style02

Table Responsive with css 01

Table Responsive with css 01

Geocoded Locations

Geocoded Locations

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Profile Style01

Card Profile Style01

Card Bootstrap4 02

Card Bootstrap4 02

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Buttons Styles Inspirations

Buttons Styles Inspirations

Animation 3d social icones avec css3

Animation 3d social icones avec css3