Question

我的javascript代码从xml文件中提取数据，并使用该数据准备数据网格。对于我的表的每一行，我想设置eventlistener属性来打开一个文件，该文件的名称实际上是该行中的“pid”字段。代码如下：

//Some code to get the xml file
var x = [];
      xmlhttp=new XMLHttpRequest();

    xmlhttp.open("GET","newdata.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

//Now creating each row from the data which i have pushed into array x

    var file_pid = "";
    for (i=0;i<x.length;i++)
      {
var file_pid = "papers/" + x[i].getElementsByTagName("pid")[0].childNodes[0].nodeValue + ".pdf";

//create each row and corresponding attributes
      tr = document.createElement('tr');
      tr.addEventListener('click',function() {window.open(file_pid)},false);

现在问题是添加了事件侦听器，但每行打开1个文件，8.pdf，这是xml文件中的最后一条记录。我该怎么办才能让它只打开分配给那个特定行的文件名？

Answer 1

这是因为你在循环中创建了一个闭包。请查看this question以获得解释和解决方案。

但是，根据行数，我认为最好将pid作为data-属性存储在行上，并且只将一个事件处理程序绑定到表（事件委托），然后检索相应的pid。有关事件处理的更多信息，建议您阅读excellent articles on quirksmode.org。

示例：

// table is a reference to the table:

function closest(element, tag) {
    tag = tag.toLowerCase();
    while(element && element.tagName.toLowerCase() !== tag) {
        element = element.parentNode;
    }
    return element;
}


table.addEventListener('click', function(event) {
    var row = closest(event.target, 'tr'), pid;
    if(row && (pid = row.getAttribute('data-pid')) {
        window.open(pid);
    }
});

请记住，在兼容W3C的浏览器和IE（IE9之前）中事件处理是不同的。因此，在IE中，您必须使用attachEvent，event对象不会传递给处理程序，等等。如果您想要跨浏览器兼容，您可以将处理程序分配给{{1 property：

onclick

然后以某种方式附加行：

table.onclick = function(event) {
    event = event || window.event;
    target = event.target || event.srcElement;
    // proceed similarly as shown above
}

如何为我通过javascript生成的表中的每一行实现不同的eventlistener

1 个答案: