Question

I wrote some simple jQuery code to try and hide rows of an html table based on the data inside one of the rows columns. The code I wrote works fine in all browsers except IE8, where it completely crashes (IE stops responding, tries to reload the tab and than reports that the page could not load).

If I include

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

the page no longer crashes, but it would be preferable to actually solve this issue rather than applying workarounds.

Here is a sample of the HTML table, and the jQuery code I am using to hide/show rows.

<table>
<thead> ... headers, table has 8 columns </thead>
<tbody>
<!--- The fifth column has a date I need to use to hide/show the rows -->
<tr> ... <td>9/27/2011</td> ... </tr>
...
</tbody>
</table>


function filterData() {
            $("input[type='checkbox']:checked").attr("checked", false);

            //This gets me the date to filter on
            var filterDate = new Date($("#SelectedTimePeriod").val());

            var minDate = new Date($("#SelectedTimePeriod").val());
            minDate.setDate(filterDate.getDate() - 7 * $("#SelectedTimeRange").val());
            var maxDate = new Date($("#SelectedTimePeriod").val());
            maxDate.setDate(filterDate.getDate() + 7 * $("#SelectedTimeRange").val());


            $("tbody tr td:nth-child(5)").each(function () {
                var rowDate = new Date($(this).text());
                if (rowDate.getTime() < minDate.getTime() || rowDate.getTime() > maxDate.getTime())
                    $(this).parent().hide();
                else
                    $(this).parent().show();
            });
        }

The line that seems to crash IE8 is:

$(this).parent().hide();

Any help would be greatly appreciated, also if there is any more information I could provide that could be helpful please let me know.

Answer 1

This might not be an answer but I have made this jsfiddle and it works in all browsers (IE7->9, FF, Chrome).

I have made some optimizations to your code btw:

// cache your "static" elements from the page, no need to query for them all the time
var $table = $('table'),
    $timePeriod = $("#SelectedTimePeriod");

function filterData() {

    // only input[type=checkbox] can be "checked" so just write "input:checked"
    // use .prop() for special attributes like checked, selected, disabled...
    $table.find('input:checked').prop("checked", false);

    // select the value once for TimePeriod
    var timePeriodVal = $timePeriod.val();
    var filterDate = new Date(timePeriodVal);

    var minDate = new Date(timePeriodVal);
    minDate.setDate(filterDate.getDate() - 7);

    var maxDate = new Date(timePeriodVal);
    maxDate.setDate(filterDate.getDate() + 7);

    // your initial selector was too long
    // find the "tbody" once and only select "td". you can omit "tr", "td" only exist in "tr" anyway
    $table.find('tbody')
          .find('td:nth-child(5)').each(function() {

        // select $(this) once and re-use
        var $this = $(this),
            rowDate = new Date($this.text());

        // explicitly mark { } and ';' to avoid misinterpretation by browsers
        if (rowDate.getTime() < minDate.getTime() || rowDate.getTime() > maxDate.getTime()) {
            $this.parent().hide();
        }
        else {
            $this.parent().show();
        }

    });
}