Display extra data when table row is clicked
Question
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.
1 answers
solution1
1 ACCPTED 2015-11-12 23:24:36
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>");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.