CODEWITHSUNDEEP
htmlhtml-table
Neal23
Neal23

Reputation: 79

Deleting rows in HTML table

I have created a Dynamic HTML table where the user can add/delete rows if they want to. There will be 2 rows to complete at one time. So, when you click 'Add Row', another 2 rows will appear. Once, I click 'Add Row' twice, there will be 3 sets of 2 rows in the HTML table. The problem is when I click 'Delete' to the middle set, the entire 2 rows are not deleted. It has the first row of the 2nd set and 3rd set. That means the second row of the 2nd and 3rd set is deleted.

3 sets of 2 rows in table

middle set deleted

 function myFunction() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        
        cell1.innerHTML = "<b><center> Start Date </center></b>";
        cell2.innerHTML = "<input type='date' name='startdate[]' id='startdate'>";
        cell3.innerHTML = "<b><center> End Date </center></b>";
        cell4.innerHTML = "<input type='date' name='enddate[]' id='enddate'>";
        cell5.innerHTML = "<b><center> Employer Name </center></b>";
        cell6.innerHTML = "<input type='text' name='employername[]' id='employername'>";
        cell7.innerHTML = "<b><center> Position Held </center></b>";
        cell8.innerHTML = "<input type='text' name='position[]' id='position'>";
    
    
    	var table2 = document.getElementById("myTable");
    	var row = table.insertRow(3);
        var cell9 = row.insertCell(0);
        var cell10 = row.insertCell(1);
        var cell11 = row.insertCell(2);
        var cell12 = row.insertCell(3);
        var cell13 = row.insertCell(4);
        var cell14 = row.insertCell(5);
        var cell15 = row.insertCell(6);
        var cell16 = row.insertCell(7);
            
        cell9.innerHTML = "<b><center> Job Site </center></b>";
        cell10.innerHTML = "<input type='text' name='jobsite[]' id='jobsite'>";
        cell11.innerHTML = "<b><center> Monthly Salary </center></b>";
        cell12.innerHTML = "<input type='number' name='salary[]' id='salary'>";
        cell13.innerHTML = "<b><center> Reason for Leaving </center></b>";
        cell14.innerHTML = "<input type='text' name='leavingreason[]' id='leavingreason'>";
        cell15.innerHTML = "<b><center> Action </center></b>";
        cell16.innerHTML = "<input type='button' value = 'Delete' onClick='Javacsript:deleteRow(this)'>"
    }
    
    
    function deleteRow(obj) {
        var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        table.deleteRow(index);
        var index2 = obj.parentNode.parentNode.rowIndex;
        var table2 = document.getElementById("myTable");
        table.deleteRow(index2);
        
    }
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    
    <table id="myTable" class="table table-bordered" cellspacing=2.5 cellpadding=7.5 id="data_table" border=1>
    <tr>
    <th>Start Date</th>
    <td><input type="date" name="startdate[]" id="startdate"></td>
    <th>End Date</th>
    <td><input type="date" name="enddate[]" id="enddate"></td>
    <th>Employer Name</th>
    <td><input type="text" name="employername[]" id="employername"></td>
    <th>Position Held</th>
    <td><input type="text" name="position[]" id="position"></td>
    </tr>
    
    <tr>
    <th>Job Site</th>
    <td><input type="text" name="jobsite[]" id="jobsite"></td>
    <th>Monthly Salary</th>
    <td><input type="number" name="salary[]" id="salary"></td>
    <th>Reason for Leaving</th>
    <td><input type="text" name="leavingreason[]" id="leavingreason"></td>
    <th>Action</th>
    <td></td>
    </tr>
    </table>
    <br>
    
    <button onclick="myFunction()" >Add Row</button>
    
    </body>
    </html>

Upvotes: 0

Views: 172

Answers (1)

Roberto Bisello
Roberto Bisello

Reputation: 1235

you already know one index, so you can simply decrease the number in order to have the previous line id and delete it

function myFunction() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(2);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        
        cell1.innerHTML = "<b><center> Start Date </center></b>";
        cell2.innerHTML = "<input type='date' name='startdate[]' id='startdate'>";
        cell3.innerHTML = "<b><center> End Date </center></b>";
        cell4.innerHTML = "<input type='date' name='enddate[]' id='enddate'>";
        cell5.innerHTML = "<b><center> Employer Name </center></b>";
        cell6.innerHTML = "<input type='text' name='employername[]' id='employername'>";
        cell7.innerHTML = "<b><center> Position Held </center></b>";
        cell8.innerHTML = "<input type='text' name='position[]' id='position'>";
    
    
    	var table2 = document.getElementById("myTable");
    	var row = table.insertRow(3);
        var cell9 = row.insertCell(0);
        var cell10 = row.insertCell(1);
        var cell11 = row.insertCell(2);
        var cell12 = row.insertCell(3);
        var cell13 = row.insertCell(4);
        var cell14 = row.insertCell(5);
        var cell15 = row.insertCell(6);
        var cell16 = row.insertCell(7);
            
        cell9.innerHTML = "<b><center> Job Site </center></b>";
        cell10.innerHTML = "<input type='text' name='jobsite[]' id='jobsite'>";
        cell11.innerHTML = "<b><center> Monthly Salary </center></b>";
        cell12.innerHTML = "<input type='number' name='salary[]' id='salary'>";
        cell13.innerHTML = "<b><center> Reason for Leaving </center></b>";
        cell14.innerHTML = "<input type='text' name='leavingreason[]' id='leavingreason'>";
        cell15.innerHTML = "<b><center> Action </center></b>";
        cell16.innerHTML = "<input type='button' value = 'Delete' onClick='Javacsript:deleteRow(this)'>"
    }
    
    
    function deleteRow(obj) {
        var index = obj.parentNode.parentNode.rowIndex;
        var table = document.getElementById("myTable");
        console.log(index);
        table.deleteRow(index);
        table.deleteRow(index-1);
        
    }
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    
    <table id="myTable" class="table table-bordered" cellspacing=2.5 cellpadding=7.5 id="data_table" border=1>
    <tr>
    <th>Start Date</th>
    <td><input type="date" name="startdate[]" id="startdate"></td>
    <th>End Date</th>
    <td><input type="date" name="enddate[]" id="enddate"></td>
    <th>Employer Name</th>
    <td><input type="text" name="employername[]" id="employername"></td>
    <th>Position Held</th>
    <td><input type="text" name="position[]" id="position"></td>
    </tr>
    
    <tr>
    <th>Job Site</th>
    <td><input type="text" name="jobsite[]" id="jobsite"></td>
    <th>Monthly Salary</th>
    <td><input type="number" name="salary[]" id="salary"></td>
    <th>Reason for Leaving</th>
    <td><input type="text" name="leavingreason[]" id="leavingreason"></td>
    <th>Action</th>
    <td></td>
    </tr>
    </table>
    <br>
    
    <button onclick="myFunction()" >Add Row</button>
    
    </body>
    </html>

Upvotes: 1

Related Questions