Javascript只经历for语句的第一次迭代

时间:2013-05-12 16:52:30

标签: javascript loops for-loop

我一直想弄清楚为什么这个'for'只循环一次。花了大约6个小时重写条件,我想知道你是否可以帮我找到问题。

提前感谢任何建议和时间!

var k;
var i = 1;

function stergeLinie(k) {
    var tabel = document.getElementById('produse');
    var rowCount = tabel.rows.length;

    var row = document.getElementById("tr" + k);
    row.parentNode.removeChild(row);

    var t = rowCount;
    for (y = k; y < t; y++) {
        document.getElementById("nrcrtid" + (y + 1)).value = y;
        document.getElementById("nrcrtid" + (y + 1)).name = "nr_crt" + y;
        document.getElementById("nrcrtid" + (y + 1)).id = "nrcrtid" + y;
        document.getElementById("prodid" + (y + 1)).name = "prod" + y;
        document.getElementById("prodid" + (y + 1)).id = "prodid" + y;
        document.getElementById("umid" + (y + 1)).name = "um" + y;
        document.getElementById("umid" + (y + 1)).id = "umid" + y;
        document.getElementById("cantitateid" + (y + 1)).name = "cantitate" + y;
        document.getElementById("cantitateid" + (y + 1)).id = "cantitateid" + y;
        document.getElementById("pretid" + (y + 1)).name = "pret" + y;
        document.getElementById("pretid" + (y + 1)).id = "pretid" + y;
        document.getElementById("pretfaraTVAid" + (y + 1)).name = "pretfaraTVA" + y;
        document.getElementById("pretfaraTVAid" + (y + 1)).id = "pretfaraTVAid" + y;
        document.getElementById("tvaid" + (y + 1)).name = "tva" + y;
        document.getElementById("tvaid" + (y + 1)).id = "tvaid" + y;
        document.getElementById("tr" + (y + 1)).id = "tr" + y;
        document.getElementById("buton" + (y + 1)).id = "buton" + y;
        document.getElementById("butons" + (y + 1)).onclick = function onclick(event) {
            stergeLinie(y);
        }
        document.getElementById("butons" + y).id = "butons" + (y);
    }
    alert(y);

    document.getElementById("tr" + i).style.height = "100%";
    i--;
}    

1 个答案:

答案 0 :(得分:1)

主要问题是这一行:

document.getElementById("butons" + (y + 1)).onclick = function onclick(event) {
        stergeLinie(y);
}
每次循环运行时{p> y都会递增(y++),所以当实际点击按钮时,y具有最终迭代时的值 - 这只是足以使循环运行一次。

你遇到的另一个问题是这一行:

var rowCount = tabel.rows.length;

如果您的ID是从1开始的,那么最小的数字是1,而length属性是0。如果有4行,则rowCount将为3,这意味着您的循环永远不会达到4,因为条件为y < rowCount

以下是您的脚本的缩减版本:http://jsfiddle.net/trolleymusic/XTzjb/ - 我还必须在开始时运行一次,以便按照您正在执行的方式绑定点击。

这是一个正确循环的更新版本:http://jsfiddle.net/trolleymusic/Z8UYp/

var k;
var i = 1;

function stergeLinie(k) {
    console.log("k: " + k);
    var tabel = document.getElementById('produse');
    // Add 1 to the rowCount because the elements have been assigned
    // ids starting with 1, and length is 0-based
    var rowCount = tabel.rows.length + 1;

    var row = document.getElementById("tr" + k);
    row.parentNode.removeChild(row);

    var t = rowCount;

    console.log(t, k);

    for (var y = k; y < t; y++) {
        console.log("Loop: " + y);

        // If the elements don't exist anymore because they were removed
        //   skip the loop
        if (!document.getElementById("butons" + (y + 1))) {
            continue;
        }

        document.getElementById("butons" + (y + 1)).onclick = function onclick(event) {
            // Get the number out of the
            // id of the element that was clicked
            var x = parseInt(this.id.replace("butons",""));
            console.log("x: " + x);
            stergeLinie(x);
        }

    }
}
下面有用地添加了

元话,您可以使用yhttp://jsfiddle.net/trolleymusic/dxy6N/)的封闭

for (var y = k; y < t; y++) {

    (function (y) {

        document.getElementById("butons" + (y + 1)).onclick = function onclick(event) {
            console.log(y);
            stergeLinie(y);
        }

    }(y));

}

看起来要复杂得多,但事实并非如此。您将所有操作放入另一个函数,并将y的值作为参数传递给该函数 - 这意味着yy的变量不同{{1}}你在循环中递增,它属于循环内的函数。这是关闭。这个问题的接受答案是:How do JavaScript closures work?给出了关闭的一个很好的解释。