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

Question

我想使用jQuery選擇<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')); 

 <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

這是一個想法，獲取表格的位置，添加寬度和高度，以獲得表格的最右下角。

然后減去邊框和填充，並使用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 2

我已經在表格中選擇了tds和ths，並使用.each()並使用.each()在它們.each()循環，如果當前有超過rowspan的trs，那么忽略它，否則選擇它。

例如，如果rowspan=2那么如果有2個tr標簽，那么如果有一個tr標簽那么選擇最后一個td，那么選擇帶有rowspan的currant td

這是一種方法：

 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> 

Answer 3

檢查屬性“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> 

這是我的初始片段：

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

這里獲取表的每一行並找到最后一個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');

}