Top PHP Courses

GET THE PHP SKILLS YOU NEED NOW TO START BUILDING YOUR OWN PHP PROJECTS


▶ Download PHP Projects Source Code


Top PHP Courses

TOP PHP COURSES


PHP for Beginners -Become a PHP Master - Project Included

You Will Learn:
  • Create a (CMS) Content Management System like wordpress
  • Use MYSQL with PHP
  • Create custom functions
  • Create Databases
  • Use OOP in PHP
  • And much more....
Instructor: Edwin Diaz
Social Proof: 24,994 students - rating 4.5

Review Example:


take this course





PHP OOP: Object Oriented Programming for beginners + Project




You Will Learn:
  • Learn New OOP techniques
  • Build PHP OOP applications
Instructor: Edwin Diaz
Social Proof: 5,755 students - rating 4.5

Review Example:

take this course


Complete PHP Course With Bootstrap3 CMS System & Admin Panel

You Will Learn:
  • You will be able to create beautiful Dynamic websites using HTML5, Bootstrap and PHP
  • You will be able to Create thier Own CMS System with thier own Restriction, Style and theme. Other CMS Systems? No need.
  • You will be able to Create web Applications Like Admin Panel, Management softwares etc...
Instructor: Joe Parys, Shahzaib Kamal
Social Proof: 53,537 students - rating 4.4

Review Example:

take this course


Projects in PHP and MySQL


You Will Learn:
  • Build Practical projects during the course
  • Learn the software development process
Instructor: Eduonix
Social Proof: 10,311 students - rating 4.5

Review Example:


take this course







More Courses you may like:


Javascript - Highlight Checked Table Row

How To Highlight Checked Table Row Using Radio Button In Javascript  

Checked Table Row


In This Javascript Tutorial we will See How To Set A BackGround Color To The Checked HTML Table TR On Radio Button Checked In JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Highlight Selected Table Row Using Radio Button</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            tr{transition: all ease-in-out .25s}
            .selected{background-color:blue;color:#fff;font-weight: bold}
            
        </style>
        
    </head>
    <body>
        
        <table id="table" border="1">
            <tr id="first-tr">
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Select</th>
            </tr>
            
            <tr>
                <td>AAAA</td>
                <td>BBBB</td>
                <td>10</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>CCCC</td>
                <td>DDDD</td>
                <td>20</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>EEEE</td>
                <td>FFFF</td>
                <td>30</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>GGGG</td>
                <td>HHHH</td>
                <td>40</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>IIII</td>
                <td>JJJJ</td>
                <td>50</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>EEEE</td>
                <td>FFFF</td>
                <td>30</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>GGGG</td>
                <td>HHHH</td>
                <td>40</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>IIII</td>
                <td>JJJJ</td>
                <td>50</td>
                <td><input type="radio" name="select"></td>
            </tr>
        </table>
        
        <script>
            
            function selectRow(){
        
                var radios = document.getElementsByName("select");
                for( var i = 0; i < radios.length; i++ )
                {
                    radios[i].onclick = function()
                    {
                        // remove class from the other rows
                        
                        var el = document.getElementById("first-tr");
                        
                        // go to the nex sibing
                        while(el = el.nextSibling)
                        {
                            if(el.tagName === "TR")
                            {
                                // remove the selected class
                                el.classList.remove("selected");
                            }
                        }
                        
                     // radio  -      td      -          tr 
                        this.parentElement.parentElement.classList.toggle("selected");
                    };
                }
        
            }
            selectRow();
        </script>    
        
    </body>
</html>

OUTPUT:

Highlight Checked Table Row Using Javascript




JavaScript - Transfer Rows Between Two Table

How To Export Selected Rows Between Two HTML Table In Javascript

Export Rows Between Two HTML Table In JS


In This Javascript Tutorial we will See How To Get Checked  HTML Table Rows Using Radio Button And Export Them To Another HTML Table In JS And Netbeans Editor .


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Transfer Rows Between Two HTML Table</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{overflow: hidden}
            .tab{float: left}
            .tab-btn{margin: 50px;}
            button{display:block;margin-bottom: 20px;}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color: #ddd;}
            
        </style>    
    </head>
    <body>
        
        <div class="container">
            
            <div class="tab">
                <table id="table1" border="1">
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Select</th>
                    </tr>
                    <tr>
                        <td>A1</td>
                        <td>B1</td>
                        <td>C1</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A2</td>
                        <td>B2</td>
                        <td>C2</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                    <tr>
                        <td>A3</td>
                        <td>B3</td>
                        <td>C3</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A4</td>
                        <td>B4</td>
                        <td>C4</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A5</td>
                        <td>B5</td>
                        <td>C5</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A6</td>
                        <td>B6</td>
                        <td>C6</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A7</td>
                        <td>B7</td>
                        <td>C7</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A8</td>
                        <td>B8</td>
                        <td>C8</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A9</td>
                        <td>B9</td>
                        <td>C9</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A10</td>
                        <td>B10</td>
                        <td>C10</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                </table>
            </div>
            
            <div class="tab tab-btn">
                <button onclick="tab1_To_tab2();">>>>>></button>
                <button onclick="tab2_To_tab1();"><<<<<</button>
            </div>
            
            <div class="tab">
                <table id="table2" border="1">
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Select</th>
                    </tr>
                </table>   
            </div>
        </div>
        
        <script>
            
            function tab1_To_tab2()
            {
                var table1 = document.getElementById("table1"),
                    table2 = document.getElementById("table2"),
                    checkboxes = document.getElementsByName("check-tab1");
            console.log("Val1 = " + checkboxes.length);
                 for(var i = 0; i < checkboxes.length; i++)
                     if(checkboxes[i].checked)
                        {
                            // create new row and cells
                            var newRow = table2.insertRow(table2.length),
                                cell1 = newRow.insertCell(0),
                                cell2 = newRow.insertCell(1),
                                cell3 = newRow.insertCell(2),
                                cell4 = newRow.insertCell(3);
                            // add values to the cells
                            cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
                            cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
                            cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
                            cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
                           
                            // remove the transfered rows from the first table [table1]
                            var index = table1.rows[i+1].rowIndex;
                            table1.deleteRow(index);
                            // we have deleted some rows so the checkboxes.length have changed
                            // so we have to decrement the value of i
                            i--;
                           console.log(checkboxes.length);
                        }
            }
            
            
            function tab2_To_tab1()
            {
                var table1 = document.getElementById("table1"),
                    table2 = document.getElementById("table2"),
                    checkboxes = document.getElementsByName("check-tab2");
            console.log("Val1 = " + checkboxes.length);
                 for(var i = 0; i < checkboxes.length; i++)
                     if(checkboxes[i].checked)
                        {
                            // create new row and cells
                            var newRow = table1.insertRow(table1.length),
                                cell1 = newRow.insertCell(0),
                                cell2 = newRow.insertCell(1),
                                cell3 = newRow.insertCell(2),
                                cell4 = newRow.insertCell(3);
                            // add values to the cells
                            cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
                            cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
                            cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
                            cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
                           
                            // remove the transfered rows from the second table [table2]
                            var index = table2.rows[i+1].rowIndex;
                            table2.deleteRow(index);
                            // we have deleted some rows so the checkboxes.length have changed
                            // so we have to decrement the value of i
                            i--;
                           console.log(checkboxes.length);
                        }
            }
            
        </script>    
        
    </body>
</html>


OUTPUT:

Change Rows Between Two HTML Table Using Javascript




JavaScript - Add Edit Remove Table Row

How To Add Update Delete Html Table Row From Input Text In Javascript 

Add Update Delete HTML Table Row


In This Javascript Tutorial we will See How To :
- add row to html table from input tag ,
- show selected table row data into input text ,
- update selected table row cells value from textboxes ,

- delete selected table row ,
In JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Add Edit Remove HTML Table Row</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{overflow: hidden}
            .tab{float: left;}
            .tab-2{margin-left: 50px}
            .tab-2 input{display: block;margin-bottom: 10px}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color:#EEE;cursor: pointer}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="tab tab-1">
                <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>10</td>
                    </tr>
                    <tr>
                        <td>A3</td>
                        <td>B3</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td>A2</td>
                        <td>B2</td>
                        <td>20</td>
                    </tr>
                </table>
            </div>
            <div class="tab tab-2">
                First Name :<input type="text" name="fname" id="fname">
                Last Name :<input type="text" name="lname" id="lname">
                Age :<input type="number" name="age" id="age">
                
                <button onclick="addHtmlTableRow();">Add</button>
                <button onclick="editHtmlTbleSelectedRow();">Edit</button>
                <button onclick="removeSelectedRow();">Remove</button>
            </div>
        </div>
        
        <script>
            
            var rIndex,
                table = document.getElementById("table");
            
            // check the empty input
            function checkEmptyInput()
            {
                var isEmpty = false,
                    fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
            
                if(fname === ""){
                    alert("First Name Connot Be Empty");
                    isEmpty = true;
                }
                else if(lname === ""){
                    alert("Last Name Connot Be Empty");
                    isEmpty = true;
                }
                else if(age === ""){
                    alert("Age Connot Be Empty");
                    isEmpty = true;
                }
                return isEmpty;
            }
            
            // add Row
            function addHtmlTableRow()
            {
                // get the table by id
                // create a new row and cells
                // get value from input text
                // set the values into row cell's
                if(!checkEmptyInput()){
                var newRow = table.insertRow(table.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
                    fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
            
                cell1.innerHTML = fname;
                cell2.innerHTML = lname;
                cell3.innerHTML = age;
                // call the function to set the event to the new row
                selectedRowToInput();
            }
            }
            
            // display selected row data into input text
            function selectedRowToInput()
            {
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                      // get the seected row index
                      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;
                    };
                }
            }
            selectedRowToInput();
            
            function editHtmlTbleSelectedRow()
            {
                var fname = document.getElementById("fname").value,
                    lname = document.getElementById("lname").value,
                    age = document.getElementById("age").value;
               if(!checkEmptyInput()){
                table.rows[rIndex].cells[0].innerHTML = fname;
                table.rows[rIndex].cells[1].innerHTML = lname;
                table.rows[rIndex].cells[2].innerHTML = age;
              }
            }
            
            function removeSelectedRow()
            {
                table.deleteRow(rIndex);
                // clear input text
                document.getElementById("fname").value = "";
                document.getElementById("lname").value = "";
                document.getElementById("age").value = "";
            }
        </script>
        
    </body>
</html>

OUTPUT:

add update delete selected html table row using javascript