finding visible rows in cloned table?

Question

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.

Answer 1

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

Answer 2

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