我们如何使用javascript动态更改HTML表内容？

Question

如果表格处于弹出状态，并且按下按钮时将显示该弹出窗口，如何动态更改html表格的内容？

我知道我们可以使用以下功能更改内容

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

但是只有在表位于同一窗口时才有可能。 如果弹出，它不会改变。

Answer 1

如果要使用悬停的div创建弹出窗口，则可以简单地使用document.getElementById（）并将要操作的元素传递给它。 如果要生成子窗口，则需要指定该窗口的名称代替文档。

var x = window.open();

var tableRef = x.getElementById();

您可以通过调用子对象的对象引用来控制子窗口的状态，就像处理文档一样。

Answer 2

您要创建哪种弹出窗口？ 这是打开一个新窗口还是在同一窗口中打开一个div，例如jquery对话框？ 后者可以按您指出的方式使用。 前者将要求您将值作为GET或POSt方法的一部分发送到服务器，然后服务器将必须发送填充的表。 有人知道更好的方法吗？ 我也很好奇

Answer 3

您可以使用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;
   }
 ">

但是，值得注意的是，大多数用户讨厌弹出窗口，除非它们是通过用户操作（单击或类似操作）启动的，否则它们将被阻止，并且可能在您不知情的情况下将其关闭。 另外，您只能在打开的窗口中执行上述操作，不能随意更改内容，甚至不能访问任何窗口。