Count Rows in a dynamic table

Question

I have a dynamically generated table which will have different numbers of rows at any given time.

<div class="marquee">
    <table runat="server" id="TableFeedReader">
    </table>
</div>

I want to count the number of rows with JQuery and pass the number as an integer to calculate a dynamic property similar to here . This code gives me a zero for my dynamic value when the HTML is generated:

    $(function () {
        var rowCount = $('TableFeedReader').length;
        var newCount = parseInt(rowCount) * 2;
        var style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'keyframe'
        var keyFrames = '\
@-webkit-keyframes marquee {\
    0% {\
        top:   9em\
    }\
    100% {\
        top:   -A_DYNAMIC_VALUEem\
    }\
}\
@-moz-keyframes marquee {\
    0% {\
        top:   9em\
    }\
    100% {\
        top:   -A_DYNAMIC_VALUEem\
    }\
}';
        style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, newCount);
        document.getElementsByTagName('head')[0].appendChild(style);
    });

Where am I going wrong?

Answer 1

Change var rowCount = $('TableFeedReader').length; to var rowCount = $('#TableFeedReader tr').length;

 console.log($('#TableFeedReader tr').length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table runat="server" id="TableFeedReader"> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table> 

Answer 2

$ takes a CSS selector, not an ID. You might have meant $('#TableFeedReader') , but that still doesn't make too much sense, because there's usually only one element with a given ID on the page.

I'd try $('#TableFeedReader tr') .