JavaScript 弹出窗口空白

Question

我有一个从 json 文件中提取数据的表。我正在尝试创建一个功能，当您双击任何行时，会弹出一个窗口，该窗口将包含所单击的行的一些信息。这是我的一些代码:

 for (var i = 0; i < data.length; i++) {

        rowData = data[i];


        rowsHtml +=

            "<tr class='mainTableRow'><td>" + rowData.ID
            + "</td><td>" + rowData.FirstName
            + "</td><td>" + rowData.LastName
            + "</td><td>" + rowData.DOB
            + "</td><td>" + rowData.Gender
            + "</td></tr>";


     var tbody = document.getElementById("data");
     tbody.innerHTML+= rowsHtml;


   //This gets the values for the pop up window
    var tablerows = document.getElementsByClassName("mainTableRow");
    for(var j=0; j<tablerows.length; j++){
     tablerows[j].addEventListener("dblclick",function(){

      //This is a function that creates a popup window
     //openWindow just contains a window.open function with the name of 
    //my file and a few other parameters such as height/width of the window
      openWindow("myhtmlfile.html");

      //gets textboxes from another HTML file
      var idvalue = document.getElementById("idtextbox");
      var dobvalue = document.getElementById("dobtextbox");

     //Adds values inside textbox. Should be same values for the clicked              //row.
      idvalue.value = rowData.ID;
      dobvalue.value = rowData.DOB;

})
}

}

为此我有 2 个单独的 HTML 文件。其中定义了一个表。另一个 HTML 文件用于弹出窗口，并在其中定义了一些文本框。 (这些值将写入文本框内)。问题是，当我双击该行时，弹出窗口打开，但值是空白的。文本框应与我单击的行具有相同的值。我收到一条错误消息:idvalue 为空。如果我将文本框移动到其中包含表格的同一个 HTML 文件，它不会给我这个错误，但它不会给我所单击的行的信息，只会给我最后一行的信息。 JavaScript 文件包含在两个 HTML 文件中，但这并不能解决问题。

如何在不使用 jQuery 或任何其他 JS 库的情况下解决此问题？任何帮助将不胜感激。

Answer 1

您的问题在于以下几点:

var idvalue = document.getElementById("idtextbox");
var dobvalue = document.getElementById("dobtextbox");

您将从当前正在使用的窗口而不是正在打开的窗口获取 ID 为“idtextbox”和“dobtextbox”的元素。

如果您只想在弹出窗口中查看信息，更简单的方法是:

alert("ID:" + String(rowData.ID) + " DOB:" + String(rowData.DOB));

这将打开一个弹出对话框，其中包含您所需的文本。

如果您确实需要为此打开一个新窗口，请查看 HTML POST: Window.open and pass parameters by post method

或者斯克雷恩提到的内容。