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

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

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

3 个答案: