单击表行时显示额外数据

Question

I have a table that's pulling data from a json file. 我有一个表，它从json文件中提取数据。 I'm trying to create a feature where when you double click on any row, a window will pop up and that window will contain some information for the row that was clicked on. 我正在尝试创建一个功能，当您双击任何行时，将弹出一个窗口，该窗口将包含有关被单击行的一些信息。 Here is some of my code: 这是我的一些代码：

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;

}

When I run this, the window pops up when I double click on any row, but it doesn't show the information for the specific row I clicked on, it shows the information for the last row only. 运行此命令时，双击任何行都会弹出该窗口，但它不会显示我单击的特定行的信息，而只会显示最后一行的信息。 So if I have 5 rows in the table and I double click on all of them, one at a time, each of them will show the information for the 5th row only. 因此，如果我在表中有5行，并且一次双击所有这些行，那么它们中的每一行将仅显示第5行的信息。

How can I fix this problem, without using jQuery or any other JS library, so that the correct information will be displayed for the row that was clicked on? 如何在不使用jQuery或任何其他JS库的情况下解决此问题，以便为单击的行显示正确的信息？ Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

This is a good usecase of using IIFE (Immediately-invoked function expression). 这是使用IIFE（立即调用的函数表达式）的好用例。

Do: 做：

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){ ....

Read up: IIFE MDN 阅读： IIFE MDN

Update 1: 更新1：

Your code in the fiddle was incorect and had a few errors. 小提琴中的代码不正确，并且有一些错误。

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

In openWindow() , you can just make use of HTML value attribute instead of having to use an id and then assigning it. 在openWindow() ，您可以仅使用HTML value属性，而不openWindow()使用id然后进行分配。

Updated app.js : 更新了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>");
}

Update 2: 更新2：

You have to have IIFE in the other for loop too. 您也必须在另一个for循环中具有IIFE。

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

app.js: 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 个解决方案

解决方案1
1 已采纳 2015-11-12 23:24:36

单击表行时显示额外数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-12 23:24:36

解决方案1
1 已采纳 2015-11-12 23:24:36