How to delete a specific row in a table using javascript?

Question

what i have implemented so far:

Enter the values in the input fields and click " Add" button , The entered values gets added to the new row .
And When i click delete button, all the rows are getting deleted .

What I need to implement :

Checkbox should get added to every row .
If i select the checkbox and click "delete" button, only that particular row should get deleted and it should work if i select multiple check boxes as well. 3.Clear the Input fields after i click add button . Can anyone check this out and tell me how to do that .

//Javascript code to Add new rows onclick of a button and to delete row .
function addMoreRows() {

    var user = document.getElementById('user_id').value;
    var date = document.getElementById('date').value;
    var color = document.getElementById('color').value;
    var table = document.getElementById('tbl_id');

    var row = table.insertRow();

    var userName = row.insertCell(0);
    var Date = row.insertCell(1);
    var Color = row.insertCell(2);
    var checkbox = row.insertCell(3);

    userName.innerHTML = user;
    Date.innerHTML = date;
    Color.innerHTML = color;

}

function deleteMoreRows(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {

        table.deleteRow(i);
        rowCount--;
        i--;
    }
}

<!-- HTML markup for the input fields and table . -->
<form align="center" method="GET">
   Enter your name : <input type="text" name="users" id="user_id"  value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
   Select the Date : <input type="date"  id="date"><br>
   Select your favorite color: 
   <select id="color" required>
      <option value="yellow">yellow</option>
      <option value="red">red</option>
   </select>
   <br>
   <br>
   <input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
   <input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>
<table id="tbl_id" style="text-align:center" align="center" valign="top">
   <thead>
      <tr>
         <th style="width:200px;">Name</th>
         <th style="width:200px;">Date</th>
         <th style="width:200px;">Color</th>
      </tr>
   </thead>

Any issues you are getting while trying to implement the remaining logics? — palaѕн
– palaѕн, Commented Apr 7, 2017 at 15:16
Hit F12 to open the javascript console. What errors are you getting when you click delete? — Matt
– Matt, Commented Apr 7, 2017 at 15:17
@mkaatman , I am not getting any error but its deleting all the rows when i click delete , I need a specific row to be deleted on selecting checkbox . but i am not sure how to add checkbox to each row and to validate. — Vivek
– Vivek, Commented Apr 7, 2017 at 15:21
You need to set checkbox.innerHTML to an input field that contains a checkbox and has a unique id tied to the row. — Matt
– Matt, Commented Apr 7, 2017 at 15:26

John Vandivier · Accepted Answer · 2017-04-07 15:48:19Z

Let me know if this works for you:

//Javascript code to Add new rows onclick of a button and to delete row .

var rowId = 0;

function addMoreRows() {

    var user = document.getElementById('user_id').value;
    var date = document.getElementById('date').value;
    var color = document.getElementById('color').value;
    var table = document.getElementById('tbl_id');

    var row = table.insertRow();

    var rowBox = row.insertCell(0);
    var userName = row.insertCell(1);
    var Date = row.insertCell(2);
    var Color = row.insertCell(3);
    var checkbox = row.insertCell(4);

    rowBox.innerHTML = '<input type="checkbox" id="delete' + getRowId() + '">';
    userName.innerHTML = user;
    Date.innerHTML = date;
    Color.innerHTML = color;

}

function deleteMoreRows(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var selectedRows = getCheckedBoxes();

    selectedRows.forEach(function(currentValue) {
      deleteRowByCheckboxId(currentValue.id);
    });
}

function getRowId() {
  rowId += 1;
  return rowId;
}

function getRowIdsFromElements($array) {
  var arrIds = [];

  $array.forEach(function(currentValue, index, array){
    arrIds.push(getRowIdFromElement(currentValue));
  });

  return arrIds;
}

function getRowIdFromElement($el) {
    return $el.id.split('delete')[1];
}

//ref: http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes
function getCheckedBoxes() {
  var inputs = document.getElementsByTagName("input");
  var checkboxesChecked = [];

  // loop over them all
  for (var i=0; i < inputs.length; i++) {
     // And stick the checked ones onto an array...
     if (inputs[i].checked) {
        checkboxesChecked.push(inputs[i]);
     }
  }

  // Return the array if it is non-empty, or null
  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

//ref: http://stackoverflow.com/questions/4967223/delete-a-row-from-a-table-by-id
function deleteRowByCheckboxId(CheckboxId) {
    var checkbox = document.getElementById(CheckboxId);
    var row = checkbox.parentNode.parentNode;                //box, cell, row, table
    var table = row.parentNode;

    while ( table && table.tagName != 'TABLE' )
        table = table.parentNode;
    if (!table) return;
    table.deleteRow(row.rowIndex);
}

<!-- HTML markup for the input fields and table . -->
<form align="center" method="GET">
   Enter your name : <input type="text" name="users" id="user_id"  value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
   Select the Date : <input type="date"  id="date"><br>
   Select your favorite color: 
   <select id="color" required>
      <option value="yellow">yellow</option>
      <option value="red">red</option>
   </select>
   <br>
   <br>
   <input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
   <input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>
<table id="tbl_id" style="text-align:center" align="center" valign="top">
   <thead>
      <tr>
         <th style="width:200px;">Delete</th>
         <th style="width:200px;">Name</th>
         <th style="width:200px;">Date</th>
         <th style="width:200px;">Color</th>
      </tr>
   </thead>

Thanks a lot for your help !! This is exactly what i was looking for . It works perfectly . Thanks again.

Collectives™ on Stack Overflow

How to delete a specific row in a table using javascript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related