我的Javascript程式无法正常运作

Question

I am creating a simple function that increment number and bind with multiple Table as S.NO. . I don't understand what's wrong with my code.

    function _IncrementNumber(id) {
        var table = document.getElementById(id);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            table.rows[i + 1].cells[0].innerHTML = (i + 1);
        }
    }
$(document).ready(function () {
    _IncrementNumber("FirstTable");
    _IncrementNumber("SecondTable");
});

DEMO Please guide me.

Answer 1

You are accessing i+1 instead of i .
In the last iteration -> you will go out of bounds.

function _IncrementNumber(id) {
        var table = document.getElementById(id);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            table.rows[i].cells[0].innerHTML = (i + 1);
        }
}
$(document).ready(function () {
    _IncrementNumber("FirstTable");
    _IncrementNumber("SecondTable");
});

Answer 2

You're trying to access a row that doesnt exist.

You should start with i=1 instead to skip the header row

for (var i = 1; i < rowCount; i++) {
    table.rows[i].cells[0].innerHTML = (i);
}

Answer 3

the error at this line was the issue. Table rows starts from 0 index. so dont need to increment the rows index change to this table.rows[i].cells[0].innerHTML = (i + 1);