I have a script that I put inside my html doc.

when I load the html page the script is not working,but when I put the script inside the console then the script is working an making the effect I want on the html doc.

here is the script,what i'm doing wrong?

var maxRows = 10;
$('.table').each(function() {
var cTable = $(this);
var cRows = cTable.find('tr:gt(0)');
var cRowCount = cRows.size();

if (cRowCount < maxRows) {
    return;
}

cRows.each(function(i) {
    $(this).find('td:first').text(function(j, val) {
       return (i + 1) + " - " + val;
    }); 
});

cRows.filter(':gt(' + (maxRows - 1) + ')').hide();


var cPrev = cTable.siblings('.prev');
var cNext = cTable.siblings('.next');

cPrev.addClass('disabled');

cPrev.click(function() {
    var cFirstVisible = cRows.index(cRows.filter(':visible'));

    if (cPrev.hasClass('disabled')) {
        return false;
    }

    cRows.hide();
    if (cFirstVisible - maxRows - 1 > 0) {
        cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
    } else {
        cRows.filter(':lt(' + cFirstVisible + ')').show();
    }

    if (cFirstVisible - maxRows <= 0) {
        cPrev.addClass('disabled');
    }

    cNext.removeClass('disabled');

    return false;
});

cNext.click(function() {
    var cFirstVisible = cRows.index(cRows.filter(':visible'));

    if (cNext.hasClass('disabled')) {
        return false;
    }

    cRows.hide();
    cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();

    if (cFirstVisible + 2 * maxRows >= cRows.size()) {
        cNext.addClass('disabled');
    }

    cPrev.removeClass('disabled');

    return false;
});

});

I have a script that I put inside my html doc.

when I load the html page the script is not working,but when I put the script inside the console then the script is working an making the effect I want on the html doc.

here is the script,what i'm doing wrong?

var maxRows = 10;
$('.table').each(function() {
var cTable = $(this);
var cRows = cTable.find('tr:gt(0)');
var cRowCount = cRows.size();

if (cRowCount < maxRows) {
    return;
}

cRows.each(function(i) {
    $(this).find('td:first').text(function(j, val) {
       return (i + 1) + " - " + val;
    }); 
});

cRows.filter(':gt(' + (maxRows - 1) + ')').hide();


var cPrev = cTable.siblings('.prev');
var cNext = cTable.siblings('.next');

cPrev.addClass('disabled');

cPrev.click(function() {
    var cFirstVisible = cRows.index(cRows.filter(':visible'));

    if (cPrev.hasClass('disabled')) {
        return false;
    }

    cRows.hide();
    if (cFirstVisible - maxRows - 1 > 0) {
        cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
    } else {
        cRows.filter(':lt(' + cFirstVisible + ')').show();
    }

    if (cFirstVisible - maxRows <= 0) {
        cPrev.addClass('disabled');
    }

    cNext.removeClass('disabled');

    return false;
});

cNext.click(function() {
    var cFirstVisible = cRows.index(cRows.filter(':visible'));

    if (cNext.hasClass('disabled')) {
        return false;
    }

    cRows.hide();
    cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();

    if (cFirstVisible + 2 * maxRows >= cRows.size()) {
        cNext.addClass('disabled');
    }

    cPrev.removeClass('disabled');

    return false;
});

});

• javascript
• jquery

• Do you get any error messages? – basilikum Commented May 27, 2013 at 23:23

3 Answers 3

You're most likely running that script before the elements that it references exist.

Make sure that the <script> tag es later in the page than the element with the class table or wrap your entire script in:

$(function(){

 ... Your entire script

});

in order to ensure that it does not execute until the DOM is ready.

Try wrapping the whole thing with this:

$(document).ready(function () { /* existing code */ });

The browser may be executing your code before the page has loaded and therefore before the elements exist.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Try wrapping your code in this

$(document).ready(function() {
    // Your code here
});

The Source