Блог

как я могу динамически изменять содержимое html-таблицы, если таблица находится во всплывающем окне, которое будет отображаться при нажатии кнопки?

Я знаю, что мы можем изменить содержимое, используя приведенную ниже функцию

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

Но это возможно только тогда, когда таблица находится в том же окне. В случае всплывающего окна это не изменится.

Если вы создаете всплывающее окно с наведенным div, то вы можете просто использовать document.getElementById() и передать ему элемент, которым вы хотите манипулировать. Если вы создаете дочернее окно, вам нужно указать имя этого окна вместо document .

 var x = window.open();

var tableRef = x.getElementById();
  

Вы можете управлять состоянием дочернего окна, вызывая ссылку на его объект, таким же образом, как вы делаете с document .

Вы можете получить доступ к элементам в окне, которое вы открываете, используя windowRef.document.getElementById(...) вот так:

 <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;
   }
 ">
  

Однако стоит отметить, что большинство пользователей ненавидят всплывающие окна, будут блокировать их, если они не инициированы действием пользователя (щелчок или подобное), и могут закрыть их без вашего ведома. Кроме того, вы можете выполнять вышеуказанное только с открытыми вами окнами, вы не можете случайным образом изменять содержимое или даже получать доступ к любому окну.

Какой тип всплывающего окна вы создаете? Это открытие нового окна или просто div в том же окне, например, jquery dialog? Последнее можно использовать именно так, как вы указали. В первом случае потребуется, чтобы вы отправили значение на сервер как часть метода GET или POSt, а затем сервер должен будет отправить заполненную таблицу. Кто-нибудь знает способ получше? Мне тоже любопытно.