I have constructed a series of nested DIVs and a table at the bottom of a webpage that I wish to exhibit in a unique window when a user double-clicks on a specific div within the content. Initially, upon loading the host page, the contents of the div remain hidden. This setup is designed for use with IE11 and jQuery. Included below is a snippet of the code:
<div id="dbg" display="none">
<div id="dbginner">
<table id="tblDbg">
<tr>
<td>DebugInfo</td>
</tr>
<tr>
<td><div id="dbgVal1"></div></td>
</tr>
</div>
</div>
For initializing upon document.ready, refer to the following snippet:
$("#dbgDiv").dblclick(function() {
var dbwin = window.open("","mypage","width=1200, height=600,scrollbars=yes");
var $dbwin = $(dbwin.document.body);
$dbwin.append( $("#dbg").html() );
$dbwin.css({"background":"yellow"});
});
Upon double-clicking #dbgDiv, a new web page opens up and displays the populated table (consisting of 2 rows) with a yellow background color applied. The header, followed by the debug value, are visible accordingly.
The ultimate goal is to implement CSS stylings exclusively to the table located within the newly opened window, specifically by adding borders to the rows and columns while formatting other elements within the separate window environment. Subsequently, the intention is to close this new window after applying styles.
Essentially, it's crucial to avoid any crossover whereby the CSS modifications linger onto both the new window div and the original main page div (which contains the debug information). The main page div must always remain concealed, only surfacing its data upon launching the distinct window. This visibility should be contained solely within the new window without affecting the display on the main page.
Is there a viable method to singularly apply style changes to the new window?