admin管理员组文章数量:1302938
I want to select the right-most, bottom-most cell in a <table> using jQuery.
It's not as easy as $('#tableId td').last(), because a cell may span several rows.
It should also handle <th> cells.
Here's my attempt so far:
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=".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>I want to select the right-most, bottom-most cell in a <table> using jQuery.
It's not as easy as $('#tableId td').last(), because a cell may span several rows.
It should also handle <th> cells.
Here's my attempt so far:
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./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>5 Answers
Reset to default 2It's less plicated to check for the attribute "rowspan". Depending of the success to find such, you change the value of "$lastcell".
https://jsfiddle/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./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>Here's my initial snippet:
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./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>I have select the tds and ths in the table with rowspan and loop on them with .each() and if the current have after it a trs more than rowspan so neglect it else select it.
EXAMPLE
if rowspan=2 then if there are after it 2 tr tags so select the last td else if there are one tr tag so select currant td with rowspan
Here is a way to do so:
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./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>Here's an idea, get the position of the table, add the width and height to get the lower most right corner of the table.
Then subtract borders and padding, and use elementFromPoint to get the cell at that position, which would be the lower right most cell, always, regardless of the order of the cells etc.
Something like this
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
Another option would be to check if the previous cell has a rowspan of 1 or more, if it does it's probably the one you're after, at least with the markup provided in the question
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
Do something like this,
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./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>Here getting each row of the table and finding the rowspan value of last td or tr element. After if it is defined then skipping the rows upto rowspan value.
I think this selector will work
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');
}
本文标签： javascriptHow can I find the bottomrightmost cell in a table using jQueryStack Overflow
版权声明：本文标题：javascript - How can I find the bottom-right-most cell in a table using jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741740524a2395263.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论