Как мы можем динамически изменять содержимое таблицы HTML, используя JavaScript? - PullRequest
Новая
       14

Как мы можем динамически изменять содержимое таблицы HTML, используя JavaScript?

1 голос
/ 11 мая 2011

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

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

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

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

Ответы [ 3 ]

1 голос
/ 11 мая 2011

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

var x = window.open();

var tableRef = x.getElementById();

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

0 голосов
/ 11 мая 2011

Вы можете получить доступ к элементам в открывшемся окне, используя 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;
   }
 ">

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

0 голосов
/ 11 мая 2011

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

...