Paul Paul - 5 months ago 75
jQuery Question

I have a button in each row of a table: How can the OnClick handler tell which row it was called from?

The goal: ,,

So I've got a Table (Which is initialized as a JQuery DataTable). Each row contains a 'remove me' button, and when that button is pressed, I want to delete the row from the current table.

What I've tried:

tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);


What happens

No matter what row I click on, the last row is deleted from the table is deleted, except if there's only one row in the table, in this situation a javascript error: "TypeError: j is undefined" is thrown from Jquery.dataTable.min.js. Both baffle me.

I can get the attributes of the right row - for example, If do something like:
alert($(this).attr("data-name"));
I click on John Smith's row, I'll see 'John Smith' in an alert box... so $(this) is the
a
tag, so why doesn't the .closest() method grab the right
tr
tag?

My Questions:


  • How do I get 'this' row (the one which contained the button which was pressed) in order to delete it?

  • Any idea what's causing the 'TypeError: j is undefined" error when there's only one row in the table?



Details:

Here's the rendered (from .jsp) HTML table:

<table class="table my-table-class">
<thead><tr><th>Name</th><th> </th></tr></thead>
<tbody>
<tr>
<td>John Smith</td>
<td><a href="javascript://" class="my-button-class" data-name="John Smith"><i class="icon-plus"></i></a></td>
</tr>

<tr>
<td>Robert Paulson</td>
<td><a href="javascript://" class="my-button-class" data-name="Robert Paulson"><i class="icon-plus"></i></a></td>
</tr>

<tr>
<td>Juan Sanchez</td>
<td><a href="javascript://" class="my-button-class" data-name="Juan Sanchez"><i class="icon-plus"></i></a></td>
</tr>
</tbody>




Here's how I initialize the tables as a Jquery DataTable:

$('.st-my-table-class').dataTable( {
"bInfo": true,
"aaSorting": [[ 0, "desc" ]], // sort 1st column
"bFilter": true, // allow search bar
"bPaginate": false, // no pagination
"sDom": '<"top"f>rt<"bottom"lp><"clear">' // (f)ilter bar on top, page (i)nfo omitted
} );


And here's the whole event handler:

$('.my-button-class').on("click", function(){
tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);
});

Answer

I think This JSFIDDLE is much closer to what you wanted. Here is the basic code

$(function() {
      var dataTable = $('.my-table-class').dataTable();
      $( ".test" ).click(function() {
           var row = $(this).closest('tr'); 
           var nRow = row[0];
           dataTable.dataTable().fnDeleteRow(nRow);
      });     
});

which I pulled from this resource here that explains in full detail on how it works. In short you need to select the node itself not the jQuery object. You can also use .firstlike so.

$( ".test" ).click(function() {
     var row = $(this).closest('tr').first(); 
     dataTable.dataTable().fnDeleteRow(row);

Note: I added the "This" text as I don't have the button style/icon.

Comments