JQuery'yi kullanarak bir tablodaki en sağdaki hücreyi nasıl bulabilirim?

Question

jQuery kullanarak <table> numaralı telefonun en sağdaki en alttaki hücresini seçmek istiyorum.

$('#tableId td').last() kadar kolay değildir, çünkü bir hücre birkaç satır içerebilir. Ayrıca <th> hücrelerini de işlemek gerekir.

İşte şimdiye kadar benim denemesi:

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

çalışacağını düşünüyorum. Bunu bulmak için başarıya bağlı olarak, "$ lastcell" değerini değiştirirsiniz.

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>

İşte benim ilk parçacık İşte

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

:

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

Burada tablonun sırayı elde tablonun alt en sağ köşesini almak için genişlik ve yüksekliği ekleyin bir fikir.

Sonra

şey bu

gibi hücrelerin vb sırasına bakılmaksızın, sınırları ve dolgu çıkarma ve daima, sağ alt çoğu hücre olurdu, o pozisyonda hücreyi almak için elementFromPoint kullanmak eğer olursa FIDDLE

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

Diğer bir seçenek önceki hücre 1 veya daha fazla bir RowSpan olup olmadığını kontrol etmek olurdu, en azından işareti, muhtemelen peşinde olduğunuz biri Söz konusu sağlanan yukarı

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 3

Ben .each() ile ve akım eğer onlara RowSpan ve döngü ile tablodaki tds ve ths seçmesini RowSpan daha böylece ihmal bir trs ondan sonra var başka seç.

ÖRNEK o 2 tr etiket başka son td seçtikten sonra Burada rowspan

ile tek tr etiketi böylece seçme üzümü td varsa varsa rowspan=2 sonra bunu yapmak için bir yol olup olmadığını:

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 4

, böyle bir şey yapın

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>

İşte tablonun her satırı alma ve son td veya tr elemanın rowspan değerini bulmakta. Sonra tanımlanırsa, satırlar rowspan değerine kadar atlanır.

Answer 5

Ben O attribute "rowspan" kontrol etmek için daha az karmaşıktır bu selektör

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

}