javascript - 使用参数设置 tabla data <td> 中的点击功能

Question

我有这个代码:

for (var i = 0; i < ArregloNombres.length; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < ArregloNombres[i].length; j++) {
        var td = document.createElement("td");
        var text = document.createTextNode(ArregloNombres[i][j]);
        td.appendChild(text);

        tr.appendChild(td);

    }
    var Link = document.createElement("a");


    var textLink = document.createTextNode("Eliminar");


    Link.appendChild(textLink);
    Link.onclick = function() {
        eliminarImpuesto(i)
    };


    var tdLink = document.createElement("td");

    tdLink.appendChild(Link);

    tr.appendChild(tdLink);

    tabla.appendChild(tr);

}

其中 eliminarImpuesto(i) 只是 alert(i)。问题是，对于我创建的每个链接，都会传递相同的参数，它是数组内的值的数量。例如，我的数组中有两个元素，然后表中的每个链接都调用函数eliminarImpuesto(2)，而不是发送正确的值。请帮忙。

Answer 1

您的变量“i”似乎是全局的。检查下面的链接: http://www.w3schools.com/js/js_function_closures.asp

也许如果您为元素分配一个属性然后将其取回，您就可以解决这个问题。

for(var i = 0; i<ArregloNombres.length ; i++){
    var tr = document.createElement("tr");
         for(var j = 0; j<ArregloNombres[i].length; j++) {
                   var td = document.createElement("td");
                   var text = document.createTextNode(ArregloNombres[i][j]);
                   td.appendChild(text);

                   tr.appendChild(td);

                 }
                   var Link = document.createElement("a");


                   var textLink = document.createTextNode("Eliminar");
                        //HERE: passing the attribute to  your element...

                        textLink.setAttribute('data-i',i);

                   Link.appendChild(textLink);
                   Link.onclick =function(){eliminarImpuesto(textLink)};


                   var tdLink = document.createElement("td");

                   tdLink.appendChild(Link);

                   tr.appendChild(tdLink);

                 tabla.appendChild(tr);

               }


             }


 function eliminarImpuesto(element)
 {
    //getting it back...
    var i = element.getAttribute('data-i');
 }