CODEWITHSUNDEEP
jqueryrow
Trip
Trip

Reputation: 13

Delete a row using his index

this script simply creates a row with a function inside that should allow to delete it after. All works, but the alert sends only the -1 value as rowIndex.

I don't understand what i'm doing wrong, can you help me? Thanks in advance 

function newRow(tableID){
    var table = document.getElementById(tableID);
    table.insertRow(1);
    var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow($(this).closest(\"table\").attr(\"id\"))'></td></tr>";
    table.rows[1].innerHTML = row;
}

function cancRow(tableID){
    var row = $(this).closest("tr");
    var rowIndex = row.rowIndex();
    alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
    //document.getElementById(tableID).deleteRow(rowIndex);
}

This is the HTML code:

<table id="abilitation">
  <tr>
    <td>Abilitations</td>
    <td><img src= "plus.png" onClick="newRow($(this).closest('table').attr('id'))"></td>
  </tr>                     
</table>

Upvotes: 0

Views: 83

Answers (3)

Arvind Maurya
Arvind Maurya

Reputation: 928

kindly try out this.

Html:

function newRow(tableID) {
  debugger
  var table = $("#" + tableID + " tbody")
  var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow($(this).closest(\"table\").attr(\"id\"))'></td></tr>";
  table.append(row);
  //table.rows[1].innerHTML = row;

}


function cancRow(tableID) {
  debugger;
  var row = $("#" + tableID + " tbody").closest("tr");
  var rowIndex = $("#" + tableID + " tbody").find('tr').parent().index();
//for last index;  
 //$("#" + tableID + " tbody").find('tr').last().index();
  alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
  //document.getElementById(tableID).deleteRow(rowIndex);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="t1">
  <tbody>

  </tbody>
</table>
<button onclick="newRow('t1')">new</button>
<button onclick="cancRow('t1')">del</button>

Upvotes: 0

Aya Salama
Aya Salama

Reputation: 1518

$(this) in your function doesn't refer to the img it refers to the window object instead

to use the element which the event is attached to you need to send the event object in your function call, and then use event.target to get the desired element.

if you want to use JQuery: you can use either $(event.target).closest("tr").index() or $(event.target).closest("tr").prop('rowIndex') to get the row index

function newRow(tableID){
    var table = document.getElementById(tableID);
    table.insertRow(1);
    var row = "<tr><td><input type='text'><img src='x.png' onClick='cancRow(event, $(this).closest(\"table\").attr(\"id\"))'></td></tr>";
    table.rows[1].innerHTML = row;
}

function cancRow(event, tableID){
    var row = event.target.closest("tr");
    var rowIndex = row.rowIndex;
    alert('tableID: ' + tableID + ' rowIndex: ' + rowIndex);
    document.getElementById(tableID).deleteRow(rowIndex);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table">
    <tr>
        <td><input type="text"><img src="x.png" onClick="cancRow(event, $(this).closest('table').attr('id'))"></td>
    </tr>
</table>
<button onclick="newRow('my-table')">Add row</button>

Upvotes: 1

Amogh Hegde
Amogh Hegde

Reputation: 432

Try This

var row = $(this).closest("tr") ;
var rowIndex = row.index();

Note: Index starts from 0

Upvotes: 0

Related Questions