How can I find the bottom-right-most cell in a table using jQuery?

Question

I want to select the right-most, bottom-most cell in a <table> using jQuery.

It's not as easy as $('#tableId td').last(), because a cell may span several rows.

It should also handle <th> cells.

Here's my attempt so far:

function fixLastCell($table){        
    var $lastCell = $table.find('td,th').last();        
    $lastCell.css('background-color', 'red');
}

fixLastCell($('#t0'));
fixLastCell($('#t1'));
fixLastCell($('#t2'));
fixLastCell($('#t3'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<table id="t0" border="1" width="200">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4 - ok</td></tr>
</table>
<p>
<table id="t1" border="1" width="200">
    <tr><td>1</td><td rowspan="2">2<br> this one is</td></tr>
    <tr><td>3 <br/>this isn't the cell you're looking for</td></tr>
</table>
<p>
<table id="t2" border="1" width="200">
    <tr><th>TH1</th><th>TH2 - ok</th></tr>
</table>
<p>
    <table id="t3" border="1" width="200">
    <tr><th>TH1</th><th rowspan="2">TH2</th></tr>
    <tr><td>3 <br/>still wrong</td></tr>
</table>

Answer 1

It's less complicated to check for the attribute "rowspan". Depending of the success to find such, you change the value of "$lastcell".

https://jsfiddle.net/8j9jybm8/2/

function fixLastCell($table){
    
 var $lastCell = $table.find('td[rowspan],th[rowspan]').last();
 var $lastCell2 = $table.find('td,th').last();
    
  if($lastCell.index() <= $lastCell2.index()){
    $lastCell = $lastCell2;
  }
    
   $lastCell.css('background-color', 'red');
}

fixLastCell($('#t0'));

fixLastCell($('#t1'));

fixLastCell($('#t2'));

fixLastCell($('#t3'));

fixLastCell($('#t4'));

fixLastCell($('#t5'));

fixLastCell($('#t6'));

fixLastCell($('#t7'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t0" border="1" width="200">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4 - ok</td></tr>
</table>
<p>
<table id="t1" border="1" width="100">
    <tr><td>1</td><td rowspan="2">2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>
<p>
<table id="t2" border="1" width="100">
    <tr><th>TH1</th><th>TH2</th></tr>
</table>
<p>
 <table id="t3" border="1" width="100">
    <tr><th>TH1</th><th rowspan="2">TH2</th></tr>
    <tr><td>3</td></tr>
</table>
<p>
<table id="t4" border="1" width="200">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4 - ok</td></tr>
</table>
<p>
<table id="t5" border="1" width="200">
    <tr><td>1</td><td rowspan="2">2<br> this one is</td></tr>
    <tr><td>3 <br/>this isn't the cell you're looking for</td></tr>
</table>
<p>
<table id="t6" border="1" width="200">
    <tr><th>TH1</th><th>TH2 - ok</th></tr>
</table>
<p>
    <table id="t7" border="1" width="200">
    <tr><th>TH1</th><th rowspan="2">TH2</th></tr>
    <tr><td>3 <br/>still wrong</td></tr>
</table>

Here's my initial snippet:

function fixLastCell($table){
  var $lastCell = $table.find('td[rowspan],th[rowspan]').last();
  
  if($lastCell.length === 0){
    $lastCell = $table.find('td,th').last();
  }
 
  $lastCell.css('background-color', 'red');
    
    
}

fixLastCell($('#t0'));

fixLastCell($('#t1'));

fixLastCell($('#t2'));

fixLastCell($('#t3'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<table id="t0" border="1" width="200">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4 - ok</td></tr>
</table>
<p>
<table id="t1" border="1" width="200">
    <tr><td>1</td><td rowspan="2">2<br> this one is</td></tr>
    <tr><td>3 <br/>this isn't the cell you're looking for</td></tr>
</table>
<p>
<table id="t2" border="1" width="200">
    <tr><th>TH1</th><th>TH2 - ok</th></tr>
</table>
<p>
    <table id="t3" border="1" width="200">
    <tr><th>TH1</th><th rowspan="2">TH2</th></tr>
    <tr><td>3 <br/>still wrong</td></tr>
</table>

Answer 2

I have select the tds and ths in the table with rowspan and loop on them with .each() and if the current have after it a trs more than rowspan so neglect it else select it.

EXAMPLE if rowspan=2 then if there are after it 2 tr tags so select the last td else if there are one tr tag so select currant td with rowspan

Here is a way to do so:

function fixLastCell($table){
    
    var $rowspan = $table.find('td[rowspan],th[rowspan]');
    var last=false;
    $rowspan.each(function(){
      crntTR=$(this).parent();
      var spans = $(this).attr('rowspan');
      for(var i =1;i<=spans;i++)
      {
         crntTR= crntTR.next('td,th');
      }
      console.log(crntTR.html());
      if( crntTR.html()== undefined)
        last = $(this);
    })
    var $lastCell = $table.find('td,th').last();
  if(last)
    $lastCell=last;
    
    $lastCell.css('background-color', 'red');
}

fixLastCell($('#t0'));

fixLastCell($('#t1'));

fixLastCell($('#t2'));

fixLastCell($('#t3'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<table id="t0" border="1" width="200">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4 - ok</td></tr>
</table>
<p>
<table id="t1" border="1" width="200">
    <tr><td>1</td><td rowspan="2">2<br> this one is</td></tr>
    <tr><td>3 <br/>this isn't the cell you're looking for</td></tr>
</table>
<p>
<table id="t2" border="1" width="200">
    <tr><th>TH1</th><th>TH2 - ok</th></tr>
</table>
<p>
    <table id="t3" border="1" width="200">
    <tr><th>TH1</th><th rowspan="2">TH2</th></tr>
    <tr><td>3 <br/>still wrong</td></tr>
</table>