CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Constant Learner
Constant Learner

Reputation: 525

HTML table rows not counted in IE, Work well in Chrome/FF , for Pagination using JS

Web application using jQuery, I want to add pagination. It works well on Firefox & Chrome. But on IE 8 it can't calculate the number of rows.

this.init = function () {
    var rows = document.getElementById(tableName).rows;
    var records = (rows.length);
    this.pages = Math.ceil(records / itemsPerPage);
    this.inited = true;
}

rows returning 0 in IE 8 but all other browser giving correct row count.

I am appending the html table to DIV Following is the html created of my table

<TABLE style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP:     5px" class="pad white" border=0 cellSpacing=1 cellPadding=1 width="100%">
<TBODY>
<TR>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>#</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Date</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Customer</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="30%">
<DIV align=center><STRONG>Description</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Status</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Amount</STRONG></DIV></TD></TR></TBODY></TABLE>
<DIV class=border-middle>
<TABLE id=**tblIncomeListData** class=pad border=0 cellSpacing=0 cellPadding=0        width="100%">
<TR class=even jQuery172016229059503345766="72">
<TD style="DISPLAY: none" vAlign=top width=0% align=middle>30</TD>
<TD vAlign=top width="10%" align=middle>00001</TD>
<TD vAlign=top width="10%" align=middle>May 28, 2013</TD>
<TD vAlign=top width="20%" align=middle>test1</TD>
<TD vAlign=top width="30%" align=middle>Other Income </TD>
<TD vAlign=top width="10%" align=middle>Paid</TD>
<TD style="TEXT-ALIGN: right" vAlign=top width="20%">OMR444.00</TD></TR></TABLE></DIV>

Upvotes: 0

Views: 2804

Answers (3)

ARC
ARC

Reputation: 467

Since you are using Jquery, use the following code for getting the number of rows. 

var rows = $('#tableId tr').length;

Also note that after getElementById, you have used tableName variable.

Don't know if you are storing the id of the table in that variable but ideally the ID of the table element has to be passed if you are using getElementById or #tableId. Hope this would help.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075099

That's odd, I thought IE8 supported the rows property. (Edit: It does: http://jsbin.com/ocufuf/1 Still, I'll leave this in place for now...)

Unless you have a table nested within that table (and it doesn't look like you do), you can replace it with getElementsByTagName:

var rows = document.getElementById(tableName).getElementsByTagName('tr');

Or of course, with jQuery (since you say you're using it, although it's not apparent from your code samples):

var rows = $("#" + tableName + " tr");

Note that if you do that, you'll have to change your table name, as **tblIncomeListData** is a valid id for HTML, but not for CSS.

If you were doing nested tables, you could still get the count easily with jQuery:

var rows = $("#" + tableName).children('thead, tbody, tfoot').children('tr');

Upvotes: 1

Altairus
Altairus

Reputation: 11

document.getElementById(table).getElementsByTagName("tr").length

Upvotes: 1

Related Questions