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(rowData.ID, rowData.DOB);
    });
    }

    }

function openWindow(id, dob){
  var newWindow = window.open("");
  newWindow.document.write("<html><head></head><body><input" +  "id='idtextbox'type='textbox' readonly><input id='dobtextbox' type='textbox'" + "readonly></body></html>");


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

//Adds values inside textbox. Should be same values for the clicked row             
 idvalue.value = id;
 dobvalue.value = dob;

}

当我运行它时，当我双击任何行时窗口弹出，但它没有显示我点击的特定行的信息，它只显示最后一行的信息。所以，如果我在表格中有5行，并且我双击它们，一次一个，每个都只显示第5行的信息。

如何在不使用jQuery或任何其他JS库的情况下解决此问题，以便为单击的行显示正确的信息？任何帮助将不胜感激。

Answer 1

这是使用IIFE（立即调用的函数表达式）的一个很好的用法。

执行：

for (var i = 0; i < data.length; i++) {
    (function(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(rowData.ID, rowData.DOB);
            });
        }

    })(i);  // pass the current value of i

}


function openWindow(id, dob){ ....

阅读：IIFE MDN

更新1：

你的小提琴中的代码是incorect并且有一些错误。

在Plunkr上查看此工作演示：http://plnkr.co/edit/0n4QuXUb5YOt0EhIuZC5?p=preview

在openWindow()中，您可以使用HTML value属性，而不必使用ID，然后分配它。

更新了app.js：

function populate(){
var data = [
    {
     "ID" : "2",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },
     {
     "ID" : "3",
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },
    {
     "ID" : "4",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    }
];

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

      var rowData = data[i];

       (function(datascope){

        if(!rowsHtml){
          var rowsHtml = '';
        }

        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(datascope.ID, datascope.DOB);
            });
        }


    })(rowData);  // pass the current value of i



}

}


function openWindow(id, dob){
  var newWindow = window.open("");
  newWindow.document.write("<html><head></head><body><input id='idtextbox' type='textbox' value='" + id + "' readonly><input id='dobtextbox' type='textbox' value='" + dob + "' readonly></body></html>");
}

更新2：

你必须在另一个for循环中使用IIFE。

更新了Plunkr：http://plnkr.co/edit/Icb5fGwEH6Q9VljLMjK6?p=preview

app.js：

function populate(){
var data = [
    {
     "ID" : "2",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },
     {
     "ID" : "3",
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    },
    {
     "ID" : "4",
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M"
    }
];

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

      var rowData = data[i];

      (function(rowData){

        if(!rowsHtml){
          var rowsHtml = '';
        }

        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++){
          (function(j){
            tablerows[j].addEventListener("dblclick",function(){
                //This is a function that creates a popup window
                openWindow(data[j].ID, data[j].DOB);
            });
          })(j);
        }


    })(rowData);  // pass the current value of i



}

}


function openWindow(id, dob){
  var newWindow = window.open("");
  newWindow.document.write("<html><head></head><body><input id='idtextbox' type='textbox' value='" + id + "' readonly><input id='dobtextbox' type='textbox' value='" + dob + "' readonly></body></html>");
}

单击表行时显示额外数据

1 个答案: