CODEWITHSUNDEEP
javascripthtmldelete-row
NooNa MarJa
NooNa MarJa

Reputation: 545

Delete table rows having selected id using javascript

I am trying to make the code to add and remove desired rows on selecting id in the select box. My code is below :

HTML code :

<body>
        <table id="table" border="1" style="float:left">
            <tr>
                <td>Employee id</td>
                <td>Name</td>
                <td>Designation</td>
            </tr>
        </table>

        <select id="select_id" style="float:right">
            <option>--select--</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select><br/><br/>

        <button onclick="delete_row()" style="float:right">remove</button>
        <button onclick="include()" style="float:right">add</button>

</body>

My javascript code :

<script type="text/javascript">
        var employees=new Array(2);

        for(i=0;i<2;i++)
            employees[i] = new Array(3);

        employees[0][0] = 1;
        employees[0][1] = "Rahul";
        employees[0][2] = "Administer";

        employees[1][0] = 2;
        employees[1][1] = "Raj";
        employees[1][2] = "Manager";

        function include(){
            var id = document.getElementById("select_id").value;
            var table = document.getElementById("table");
            var row = table.insertRow();
            id=id-1;

            var col1 = row.insertCell(0);
            var col2 = row.insertCell(1);
            var col3 = row.insertCell(2);

            col1.innerHTML = employees[id][0];
            col2.innerHTML = employees[id][1];
            col3.innerHTML = employees[id][2];
        }
    </script>

Add button works fine. but for remove button I cant get a function to remove all the rows with selected id. Can anyone suggest me?

My code in jsfiddle : https://jsfiddle.net/noona/fNPvf/23235/

Upvotes: 1

Views: 2688

Answers (2)

Umer Hayyat
Umer Hayyat

Reputation: 406

use querySelectorAll and rowIndex to achieve this. here is your updated code

var employees = new Array(2);

for (i = 0; i < 2; i++)
  employees[i] = new Array(3);

employees[0][0] = 1;
employees[0][1] = "Rahul";
employees[0][2] = "Administer";

employees[1][0] = 2;
employees[1][1] = "Raj";
employees[1][2] = "Manager";

function include() {
  var id = document.getElementById("select_id").value;
  var table = document.getElementById("table");
  var row = table.insertRow();
  id = id - 1;
  row.id = id;
  var col1 = row.insertCell(0);
  var col2 = row.insertCell(1);
  var col3 = row.insertCell(2);

  col1.innerHTML = employees[id][0];
  col2.innerHTML = employees[id][1];
  col3.innerHTML = employees[id][2];
}

function delete_row() {
  var id = document.getElementById("select_id").value - 1;
  var table = document.getElementById("table");
  rowsCount = table.querySelectorAll('tr[id="' + id + '"');

  for (var i = 0; i < rowsCount.length; i++) {
    table.deleteRow(rowsCount[i].rowIndex);
  }

}
<table id="table" border="1" style="float:left">
  <tr>
    <td>Employee id</td>
    <td>Name</td>
    <td>Designation</td>
  </tr>
</table>

<select id="select_id" style="float:right">
  <option>--select--</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<br/>
<br/>

<button onclick="delete_row()" style="float:right">remove</button>
<button onclick="include()" style="float:right">add</button>

Upvotes: 2

Jin Ming - 金明 - 김명
Jin Ming - 金明 - 김명

Reputation: 75

When adding a new row, give the newly added rows an attribute that holds it's id value. Then you can delete all the rows whose attribute value is equal to selected id in dropmenu. you can try below:

function include(){
var table = document.getElementById("table");
        var id = document.getElementById("select_id").value;
        var table = document.getElementById("table");
        var row = table.insertRow();

        // give the new row an attribute that can identify itself
        row.setAttribute("emplId",id);

        id=id-1;

        var col1 = row.insertCell(0);
        var col2 = row.insertCell(1);
        var col3 = row.insertCell(2);

        col1.innerHTML = employees[id][0];
        col2.innerHTML = employees[id][1];
        col3.innerHTML = employees[id][2];

    }

function delete_row() {
    var table = document.getElementById("table");
    var id = document.getElementById("select_id").value;
    for(var i = 0; i<table.rows.length; i++) { // iterate through the rows
        var rowEmplId = table.rows[i].getAttribute("emplId");
        if(rowEmplId==id) { // found a row matches the selected option
            table.deleteRow(i); // remove this row
            i--; // we just removed a row, so we need to adjust the cursor   
        }
    }
}

Upvotes: 1

Related Questions