arvindsvt/javascript-add-edit-remove-table-row

## javascript-add-edit-remove-table-row
<!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>

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript - Add HTML Table Row </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>

            function addRow()
            {
                // get input values
                var fname = document.getElementById('fname').value;
                 var lname = document.getElementById('lname').value;
                  var age = document.getElementById('age').value;

                  // get the html table
                  // 0 = the first table
                  var table = document.getElementsByTagName('table')[0];

                  // add new empty row to the table
                  // 0 = in the top
                  // table.rows.length = the end
                  // table.rows.length/2+1 = the center
                  var newRow = table.insertRow(table.rows.length/2+1);

                  // add cells to the row
                  var cel1 = newRow.insertCell(0);
                  var cel2 = newRow.insertCell(1);
                  var cel3 = newRow.insertCell(2);

                  // add values to the cells
                  cel1.innerHTML = fname;
                  cel2.innerHTML = lname;
                  cel3.innerHTML = age;
            }

        </script>

    </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="addRow();">Add Row</button><br/><br/>

        <table border="1">

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

            <tr>
                <td>AAAAAA</td>
                <td>BBBBBB</td>
                <td>10</td>
            </tr>

             <tr>
                <td>CCC</td>
                <td>DDDD</td>
                <td>20</td>
            </tr>

             <tr>
                <td>EEE</td>
                <td>FFFFF</td>
                <td>30</td>
            </tr>

             <tr>
                <td>GGGGG</td>
                <td>HHHH</td>
                <td>40</td>
            </tr>

             <tr>
                <td>MMMMMM</td>
                <td>NNNN</td>
                <td>50</td>
            </tr>

        </table>

    </body>

</html>
reff:http://1bestcsharp.blogspot.com/2017/04/javascript-add-edit-remove-table-row.html
http://1bestcsharp.blogspot.com/2017/01/javascript-add-row-to-html-table-.html