CSS3 - Simple ProgressBar Animation

How To Make A Basic ProgressBar Animation In CSS3




In This CSS Tutorial we will see How To Make A ProgressBar Animation Using Keyframes In CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title> CSS Progress Bar </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            
            div{background-color: #ddd;width: 250px}
            span{background-color: red;height: 25px;display: block;
                 animation: prog 2s linear forwards}
            
            @keyframes prog{
                
                0%{width:0%}
                100%{width:100%;background-color:green}
            }
            
        </style>
    </head>
    <body>
       
        <div>
            <span></span>
        </div>
        
    </body>
</html>

OutPut:

css progress bar animation

Javascript - Change Selected HTML Table Row Background Color

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

Javascript - Remove HTML Table Row

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

Javascript - Edit HTML Table Row

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

Javascript - Populate HTML Table From Array

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">
            
            <!-- The Row Number 0 -->
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <!-- End Row Number 0 -->
            <!--
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </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

Javascript - Populate Select Option From Array

How To Fill A DropDown List From Array Using Javascript

fill select options from array



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:


Javascript - Add Options To Select From Input Text

How To Insert A New Option To DropDown List From TextBox Using Javascript

add item to drpdown list using javascript


In This Javascript Tutorial we will See How To Add A Option To Select From Input Text Value On Button Onclick Event Using JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Add New Option</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      
        <select id="select">
            <option value="java">Java</option>
            <option value="c#">C#</option>
        </select>
        <input type="text" id="val">
        <button onclick="insertValue();">Add</button>

        <script>
            
            function insertValue()
            {
                var select = document.getElementById("select"),
                    txtVal = document.getElementById("val").value,
                    newOption = document.createElement("OPTION"),
                    newOptionVal = document.createTextNode(txtVal);
             
                newOption.appendChild(newOptionVal);
                select.insertBefore(newOption,select.firstChild);
            }
            
        </script>

    </body>
</html>


OUTPUT:

insert options to dropdown list

JavaScript - Get Selected Option Value

How To Get Selected Option Value From A DropDown List Using Javascript

get selected option value using javascript


In This Javascript Tutorial we will See How To Get The Value Of The Selected Option From Select Tag Onchange Event Using JS And Netbeans Editor .


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Selected Option Value</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <select id="list" onchange="getSelectValue();">
            <option value="js">JavaScript</option>
            <option value="php">PHP</option>
            <option value="c#">Csharp</option>
            <option value="java">Java</option>
            <option value="node">Node.js</option>
        </select>
    <script>
        
        function getSelectValue()
        {
            var selectedValue = document.getElementById("list").value;
            console.log(selectedValue);
        }
        getSelectValue();

    </script>
    </body>
</html>


OUTPUT:

select option value

JavaScript - Display Selected HTML Table Row Values Into Input Text

How To Set Selected HTML Table Row Data Into TextBoxes Using Javascript

Selected HTML Table Row Values To TextBoxes


In This Javascript Tutorial we will See How To Get Selected Html Table Row Values And Show It In Input Text On Row Click Event Using JS And Netbeans Editor .


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Display Selected HTML Table TR Values In Input Text</title>
        <meta charset="UTF-8">
        <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>
        
        <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>
                <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>
    
                var table = document.getElementById('table');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("fname").value = this.cells[0].innerHTML;
                         document.getElementById("lname").value = this.cells[1].innerHTML;
                         document.getElementById("age").value = this.cells[2].innerHTML;
                    };
                }
    
         </script>
        
    </body>
</html>


OUTPUT:

insert html table selected row values into input text