Question

how can I dynamically change the html table contents if the table is in a pop up which will be displayed while pressing a button?

I know we can change the content using the below function

function change(){
    var x=document.getElementById('tbl').rows
    var y=x[0].cells
    y[0].innerHTML="NEW CONTENT"
}

But it is only possible when the table is on the same window. In case of pop up it will not change.

Answer 1

You can access the elements in a window you open using windowRef.document.getElementById(...) like so:

<script type="text/javascript">
// Global used here, would use in a closure in RL
var popupWindow;

function popWin() {
  var content = '<title>Popup window</title>' +
                '<table id="tbl">' +
                '<tr><td>Row 0 Cell  0<td>Row 0 Cell  1' +
                '</table>';
  var newWin = window.open('','newWin');
  newWin.document.write(content);
  newWin.document.close();
  return newWin;
}
</script>
<p>Some examples of accessing the content of a popup
   created by script in this page</p>

<input type="button" value="Open popup" onclick="
  popupWindow = popWin();
">
<input type="button" value="change table content" onclick="
  if (popupWindow) {
    var tbl = popupWindow.document.getElementById('tbl');
    tbl.rows[0].cells[0].firstChild.data = 'hey hey!';
  }
 ">
 <input type="button" value="Close popup" onclick="
   if (popupWindow) {
     popupWindow.close();
     popupWindow = null;
   }
 ">

However it’s worth noting that most users hate popups, will block them unless they are initiated by a user action (click or similar), and may close them without you knowing. Also, you can only do the above with windows that you open, you can’t randomly change the content, or even access, any window.