<!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++;
}
}
}
