How To Move HTML Table Selected Row Up And Down In Javascript [ with Source code ]
![How To Move HTML Table Selected Row Up And Down In Javascript [ with Source code ]](https://i.ytimg.com/vi/srv5p791Am8/maxresdefault.jpg)
In This Javascript Tutorial we will See How To Change Selected HTML Table Row Position Up Or Down On Button Click using JS And Netbeans Editor .
In This Javascript Tutorial we will See How To Change Selected HTML Table Row Position Up Or Down On Button Click using JS And Netbeans Editor .
Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Row Up And Down</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
tr{cursor: pointer}
.selected{background-color: red; color: #fff;font-weight: bold}
button{margin-top:10px;background-color: #eee;border: 2px solid #00F;
color: #17bb1c;font-weight: bold;font-size: 25px;cursor: pointer}
</style>
</head>
<body>
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
</tr>
</table>
<button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
<script>
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++;
}
}
}
</script>
</body>
</html>
Bootstrap 5 Complete Course with Examples
Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners
Nest.JS Tutorial for Beginners
Hello Vue 3: A First Look at Vue 3 and the Composition API
Building a simple Applications with Vue 3
Deno Crash Course: Explore Deno and Create a full REST API with Deno
How to Build a Real-time Chat App with Deno and WebSockets
Convert HTML to Markdown Online
HTML entity encoder decoder Online
What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js
What are the differences? Do they each have specific use contexts?
Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You
In this article we will discuss full details and comparison of both Ember.js and Vue.js
Grokking Call(), Apply() and Bind() Methods in JavaScript
In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.
Top Vue.js Developers in USA
Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.