Как я могу найти нижнюю правую ячейку в таблице с помощью jQuery?

Я хочу выбрать самую правую, самую нижнюю ячейку в <table>, используя jQuery.

Это не так просто, как $('#tableId td').last(), потому что ячейка может занимать несколько строк.

Он также должен обрабатывать ячейки <th>.

Здесь моя попытка:

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>

Ответы

Ответ 1

Сложнее проверить атрибут "rowspan" . В зависимости от успеха поиска, вы меняете значение "$ 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>

Ответ 2

Вот идея, получить позицию таблицы, добавить ширину и высоту, чтобы получить нижний правый угол таблицы.

Затем вычитайте границы и отступы и используйте elementFromPoint, чтобы получить ячейку в этой позиции, которая была бы самой правой правой ячейкой, всегда, независимо от порядка ячеек и т.д.

Что-то вроде этого

function fixLastCell($table){
    var offset = $table.offset();

    offset.left += ($table.width() - 
                    $table.css('border-right-width').replace(/[^-\d\.]/g, '') - 
                    $table.css('padding-right').replace(/[^-\d\.]/g, '')) - 1;

    offset.top  += ($table.height() - 
                    $table.css('border-bottom-width').replace(/[^-\d\.]/g, '') - 
                    $table.css('padding-bottom').replace(/[^-\d\.]/g, '')) -1;

    var $last = $(document.elementFromPoint(offset.left, offset.top));

    return $last.css('background-color', 'red');
}

FIDDLE

Другой вариант - проверить, имеет ли предыдущая ячейка значение в столбце 1 или больше, если оно, вероятно, совпадает с предыдущим, по крайней мере с разметкой, предоставленной в вопросе

function fixLastCell($table){
    var $cells    = $table.find('td,th');
    var $lastCell = $cells.last();
    var $prevCell = $cells.eq( $cells.index( $lastCell ) - 1 );

    $lastCell = $prevCell.attr('rowspan') > 1 ? $prevCell : $lastCell;

    $lastCell.css('background-color', 'red');
}

FIDDLE

Ответ 3

Я выбрал tds и ths в таблице с помощью rowspan и loop на них с .each(), и если у текущего есть после этого trs больше, чем rowspan, так что пренебрегайте им, выберите его.

Пример if rowspan=2, то, если после этого есть 2 tr тега, выберите последний td else, если есть один трёх тег, поэтому выберите currant td с rowspan

Вот как это сделать:

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>

Ответ 4

Сделайте что-нибудь подобное,

function find($table) {
  var $element, j = -1,
    span;
  $table.find('tr').each(function(i, el) {
    if (j < i) {
      span = $(el).children('td,th').last().attr('rowspan');
      j = span ? parseInt(span, 10) + i + j : j;
      $element = $(el).children('td,th').last();
    }
  });
  return $element;
}

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

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

<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>
<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>
<table id="t2" border="1" width="200">
  <tr>
    <th>TH1</th>
    <th>TH2 - ok</th>
  </tr>
</table>
<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>


<table id="t4" border="1" width="200">
  <tr>
    <th>TH1</th>
    <th rowspan="3">TH2</th>
  </tr>
  <tr>
    <td>3
      <br/>still wrong</td>
  </tr>
  <tr>
    <td>3
      <br/>still wrong</td>
  </tr>
  <tr>
    <td>3
      <br/>still wrong</td>
    <td>last</td>
  </tr>
</table>

Ответ 5

Я думаю, что этот селектор будет работать

    function fixLastCell($table){   
    var $lastCell = $table.find("tr td[rowspan]:last,tr th[rowspan]:last");

    if($lastCell.length===0){
        $lastCell = $table.find("tr:last td:last,tr:last th:last");
    }

    $lastCell.css('background-color', 'red');

}