Question

我想使用jQuery在artisan中选择最右边，最底部的单元格。

它不像<table>那么容易，因为单元格可能跨越多行。

它还应该处理$('#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'));

Answer 1

这是一个想法，获取表格的位置，添加宽度和高度以获得表格的最右下角。

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

Answer 2

我选择了行中的tds和ths并使用.each()在其上循环，如果当前有超过rowspan的trs，那么忽略它，否则选择它。

示例 if rowspan=2然后如果有2个tr标签，那么如果有一个tr标签则选择最后一个td，所以选择currant td with rowspan

这是一种方法：

＆＃13;
＆＃13;
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'));
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

检查attribute "rowspan"并不复杂。根据找到这样的成功，您可以更改＆＃34; $ lastcell＆＃34;。

的值

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

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

这是我的初始代码段：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 4

做这样的事，

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

这里得到表的每一行并找到最后一个td或tr元素的rowspan值。如果已定义，则跳过行达到rowspan值。

Answer 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');

}

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

5 个答案: