CODEWITHSUNDEEP
javascripthtmljson
developer-x
developer-x

Reputation: 83

Display extra data when table row is clicked

I have a table that's pulling data from a json file. 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.

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? Any help would be appreciated.

Upvotes: 0

Views: 1609

Answers (1)

Rahul Desai
Rahul Desai

Reputation: 15501

This is a good usecase of using IIFE (Immediately-invoked function expression).

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

Update 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

In openWindow(), you can just make use of HTML value attribute instead of having to use an id and then assigning it.

Updated 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:

You have to have IIFE in the other for loop too.

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

Upvotes: 1

Related Questions