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>
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')) {
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>
<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
}
});
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"})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.