我有一个从 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 库的情况下解决此问题，以便为单击的行显示正确的信息？任何帮助将不胜感激。
最佳答案
这是使用 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:
您在 fiddle 中的代码不正确并且有一些错误。
在 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>");
}
关于javascript - 单击表格行时显示额外数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33683283/