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

【问题标题】：How can we change the HTML table contents dynamically using javascript?我们如何使用 javascript 动态更改 HTML 表格内容？
【发布时间】：2011-05-11 12:40:12
【问题描述】：

如果表格在按下按钮时将显示的弹出窗口中，我如何动态更改 html 表格内容？

我知道我们可以使用以下函数更改内容

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

但只有当桌子在同一个窗口上时才有可能。在弹出的情况下，它不会改变。

【问题讨论】：

标签： javascript dynamic html-table

【解决方案1】：

如果您正在创建带有悬停 div 的弹出窗口，那么您可以简单地使用 document.getElementById() 并将您想要操作的元素传递给它。如果您要生成子窗口，则需要指定该窗口的名称来代替文档。

var x = window.open();

var tableRef = x.getElementById();

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：