Constant Learner Constant Learner - 7 months ago 12
Javascript Question

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%">
<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>


That's odd, I thought IE8 supported the rows property. (Edit: It does: 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');