How To Make A Basic ProgressBar Animation In CSS3

Javascript - Change Selected HTML Table Row Background Color

Add Comment

How To Change HTML Table Selected Row Background Color Using JavaScript

set Background Color to selected html table row

In This Javascript Tutorial we will See How To Set Background Color To The Selected HTML Table Row On Row Click In JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>
<html>
<head>
<title> Set Background Color To Selected Table TR </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

tr{cursor: pointer; transition: all .25s ease-in-out}
.selected{background-color: red; font-weight: bold; color: #fff;}

</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>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
</tr>

</table>

<script>

function selectedRow(){

var index,
table = document.getElementById("table");

for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// remove the background from the previous selected row
if(typeof index !== "undefined"){
table.rows[index].classList.toggle("selected");
}
console.log(typeof index);
// get the selected row index
index = this.rowIndex;
// add class selected to the row
this.classList.toggle("selected");
console.log(typeof index);
};
}

}
selectedRow();
</script>
</body>
</html>

OUTPUT:

Set Background Color To Selected Table Row

Need More ?

Javascript - Remove HTML Table Row

6 Comments

How To Delete HTML Table Selected Row Using JavaScript

remove html table selected row in javascript

In This Javascript Tutorial we will See How To Remove HTML Table On Button Click
In JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Remove HTML Table Selected Row</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td:last-child{background-color: #F00;color:#FFF;cursor: pointer;
font-weight: bold;text-decoration: underline}
</style>
</head>
<body>

<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Delete</th>
</tr>

<tr>
<td>FN1</td>
<td>LN1</td>
<td>10</td>
<td>remove</td>
</tr>

<tr>
<td>FN2</td>
<td>LN2</td>
<td>20</td>
<td>remove</td>
</tr>

<tr>
<td>FN3</td>
<td>LN3</td>
<td>30</td>
<td>remove</td>
</tr>

<tr>
<td>FN4</td>
<td>LN4</td>
<td>40</td>
<td>remove</td>
</tr>

<tr>
<td>FN5</td>
<td>LN5</td>
<td>50</td>
<td>remove</td>
</tr>
</table>

<script>

var index, table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].cells[3].onclick = function()
{
var c = confirm("do you want to delete this row");
if(c === true)
{
index = this.parentElement.rowIndex;
table.deleteRow(index);
}

//console.log(index);
};

}

</script>

</body>
</html>

OUTPUT:

delete html table selected row using javascript

Need More ?

Javascript - Edit HTML Table Row

5 Comments

How To Update HTML Table Selected Row Using JavaScript

edit html table selected row using javascript

In This Javascript Tutorial we will See Update HTML Table Selected Row From Input Text
1 - get selected row and display data into input text.
2 - edit the selected row with the new values .
In JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Edit HTML Table Selected Row</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table tr:not(:first-child){
cursor: pointer;transition: all .25s ease-in-out;
}
table tr:not(:first-child):hover{background-color: #ddd;}
</style>
</head>
<body>
First Name:<input type="text" name="fname" id="fname"><br><br>
Last Name:<input type="text" name="lname" id="lname"><br><br>
Age:<input type="text" name="age" id="age"><br><br>
<button onclick="editRow();">Edit Row</button><br><br>

<table id="table" border="1">

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>

<tr>
<td>FN1</td>
<td>LN1</td>
<td>10</td>
</tr>

<tr style="background-color: #ddd">
<td>FN2</td>
<td>LN2</td>
<td>20</td>
</tr>

<tr>
<td>FN3</td>
<td>LN3</td>
<td>30</td>
</tr>

<tr>
<td>FN4</td>
<td>LN4</td>
<td>40</td>
</tr>

<tr>
<td>FN5</td>
<td>LN5</td>
<td>50</td>
</tr>

</table>


<script>

// get selected row
// display selected row data in text input

var table = document.getElementById("table"),rIndex;

for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
console.log(rIndex);

document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}


// edit the row
function editRow()
{
table.rows[rIndex].cells[0].innerHTML = document.getElementById("fname").value;
table.rows[rIndex].cells[1].innerHTML = document.getElementById("lname").value;
table.rows[rIndex].cells[2].innerHTML = document.getElementById("age").value;
}

</script>

</body>
</html>

OUTPUT:

update html table selected row in javascript

Need More ?

Javascript - Populate HTML Table From Array

1 Comment

How To Fill An HTML Table With Array Data Using JavaScript

fill an HTML table with array values in JavaScript

In This Javascript Tutorial we will See 2 Way On How To Popuate HTML Table With Array Data With For Loop
1 - display array values into row cells.
2 - add rows and cells with data from array.
In JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>
<html>
<head>
<title> Add Rows To HTML Table From Array </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<table id="table" border="1">


<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>


</table>

<script>

var array = [["A1","B1","C1"],
["A2","B2","C2"],
["A3","B3","C3"],
["A4","B4","C4"],
["A5","B5","C5"],
["A1","B1","C1"],
["A2","B2","C2"],
["A3","B3","C3"],
["A4","B4","C4"],
["A5","B5","C5"]],
table = document.getElementById("table");

/* Method 1
// rows
for(var i = 1; i < table.rows.length; i++)
{
// cells
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].innerHTML = array[i - 1][j];
}
}
*/

// Method 2

for(var i = 0; i < array.length; i++)
{
// create a new row
var newRow = table.insertRow(table.length);
for(var j = 0; j < array[i].length; j++)
{
// create a new cell
var cell = newRow.insertCell(j);

// add value to the cell
cell.innerHTML = array[i][j];
}
}
</script>

</body>
</html>

OUTPUT:

Populate HTML Table Using Array In Javascript

Need More ?

Javascript - Populate Select Option From Array

2 Comments

How To Fill A DropDown List From Array Using Javascript

In This Javascript Tutorial we will See How To Add A Options To Select And Set Attribute To Option From Array Using For Loop In JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Add Option From Array</title>

<meta charset="windows-1252">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<select id="select">

<option value="default">default</option>

</select>

<script>

var select = document.getElementById("select"),

arr = ["html","css","java","javascript","php","c++","node.js","ASP","JSP","SQL"];

for(var i = 0; i < arr.length; i++)

{

var option = document.createElement("OPTION"),

txt = document.createTextNode(arr[i]);

option.appendChild(txt);

option.setAttribute("value",arr[i]);

select.insertBefore(option,select.lastChild);

}

</script>

</body>

</html>

OUTPUT:

Need More ?