How to check if TD is last with class in row

Question

I am new to jQuery and hope someone can help me with this.

I have a large HTML table with dynamically added rows.

The table has a standard structure (incl. thead, tbody and tfoot).

Within this table there are editable TDs (which have the class "editable" and contain a contenteditable div) and non-editable TDs (which dont't have the class "editable" and do not contain a div).

If a user is in such a div I would like to check if the current (closest) TD is the last TD within the same row that has a certain class ("editable").

I tried the below but this doesn't work here. Can someone tell me what I am doing wrong ?

My jQuery (in doc ready):

$(document).keydown(function(e){
    var current = $(e.target);
    // ...
    if($(current).closest('td').is('td.editable:last')){
        alert('last editable td in current row'); // test alert
    }
    // ...
});

My HTML (example row):

<tr>
    <!-- ... -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td></td> <!-- non-editable -->
    <td></td> <!-- non-editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <!-- ... -->
</tr>

Answer 1

Use jQuery index() like

$('div').click(function() {
    var editables = $(this).closest('tr').find('td.editable')
    var count = editables.length;
    if(editables.index($(this).closest('td')) == (count - 1))...
});

The above should not return an index if closest('td') does not have class editable

$('div').click(function() {
  var editables = $(this).closest('tr').find('td.editable')
  var count = editables.length;
  console.log('Is last editable td: ' + (editables.index($(this).closest('td')) == (count - 1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <!-- ... -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- ... -->
  </tr>
</table>

Answer 2

Hey you can try this: https://jsfiddle.net/alaingoldman/5cseugvs/1

Basically what i did is i targeted the table tag and looked through it's descendants with the pseudo class last-of-type.

Hopefully this helps. Cheer.s

$('table tr:last-of-type').css({backgroundColor: "pink"})

Answer 3

Fiddle

<table>
    <tr>
        <td class="editable"><div contenteditable="true">11</div></td> 
        <td class="editable"><div contenteditable="true">22</div></td>
        <td>33</td> 
        <td>44</td> 
        <td class="editable"><div contenteditable="true">55</div></td> 
    </tr>
</table>

 $("table tr td.editable").keydown(function(){   
    var col = $(this).parent().children().index($(this));
    if(col == $(this).parent().children().size() - 1){
        alert('last editable td in current row'); // test alert
    }    
});

Answer 4

Try the :last-of-type selector? Never use :last or :first, as they are implemented differently in every browser!

if ($(current).closest('td').is('td.editable:last-of-type')) {