如何使用jQuery在表中找到最右下角的单元格？

Question

我想使用<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>

​

Answer 1

检查属性“行跨度”并不那么复杂。根据查找成功与否，您可以更改"$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>

​

这是我的第一个片段：

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

这里有一个想法，得到桌子的位置，加上宽度和高度，得到桌子右下角。

然后减去边框和填充，并使用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');
}

小提琴

另一种选择是检查上一个单元格是否有一个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');
}

小提琴

Answer 3

我在表中选择了tds和ths，并使用.each()对其进行循环，如果当前的tds和the超过了行跨度，那么忽略它，然后选择它。

示例如果rowspan=2，那么如果后面有2 tr标记，那么选择最后一个td，如果有tr标记，那么选择currant和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>

​