CODEWITHSUNDEEP
javascriptjqueryhtml
luisluix
luisluix

Reputation: 579

finding visible rows in cloned table?

How can I find the visible rows inside a cloned table? 

var divContents = $("#mytable").clone();
divContents.find('tr:visible'); // <-- not working

Please dont tell me to do this:

var divContents = $("#mytable tr:visible").clone();

I need to work with the cloned element because I get a copy of it, alter it and then send it to print.

Upvotes: 0

Views: 462

Answers (2)

adeneo
adeneo

Reputation: 318302

jQuery's :visible selector selects elements that consume space in the document.
Visible elements have a width or height that is greater than zero.

Your elements aren't even in the document, as they are a cloned set that only exists in memory, so they are by definition not :visible, none of them.

If what you really want is to select elements that aren't display:none or similar, you can filter based on that

var divContents = $("#mytable").clone();

var visible = divContents.find('tr').filter(function(index, elem) {
    return elem.style.display !== 'none' ||
           elem.style.visibility !== 'hidden';
});

visible.css('color', 'red'); // target only visible rows

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337637

Visible elements can only be detected when the element is part of the DOM. As such you could append the table (well off screen if necessary), work with the visible rows and then remove it (again, if necessary). Something like this:

var $divContents = $("#mytable").clone().css({
    position: 'absolute',
    left: '-10000px'
}).appendTo('body');

var $visibleRows = $divContents.find('tr:visible');
// do something with $visibleRows...

$divContents.remove();

Upvotes: 1

Related Questions