Question

我写了一些简单的jQuery代码，试图根据其中一个行列中的数据隐藏html表的行。我编写的代码在除IE8之外的所有浏览器中都能正常工作，它完全崩溃（IE停止响应，尝试重新加载选项卡，而不是报告页面无法加载）。

如果我包括

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

页面不再崩溃，但最好是实际解决此问题，而不是应用变通办法。

以下是HTML表的示例，以及我用来隐藏/显示行的jQuery代码。

<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();
            });
        }

似乎崩溃IE8的一行是：

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

如果我能提供更多可能有用的信息，我们将非常感谢您的帮助，请告知我们。

Answer 1

我的一名同事使用setTimeout

解决了这个问题

var mili = j$("li.autocompletehover", pnl).length > 0 ? 200 : 0;
setTimeout(function () {
   pnl.hide();
}, mili);

Answer 2

我不确定这是答案，但是要尝试一下 - IE往往希望使用动态表格宽度。可能是IE8中的代码与show / hide冲突。将“table-layout：fixed”添加到表格样式（css或直接）并手动设置表格第一行中tds的宽度（应该具有列名，因此不应该隐藏）。或者，如果您已经手动设置了表的宽度，则手动设置除第一行中最后一个td之外的所有宽度。如果由于某种原因您无法或不愿意将宽度应用于第一行tds，则在表的第一个tr之前使用colgroup定义它们。（关于“colgroup”的网络搜索应该会告诉你如何相对快速地做到这一点。）

Answer 3

我不确定为什么你的代码出现问题，但是我有很多时候在IE8上完成了一个在表行上执行hide（）和show（）而没有任何问题的项目。我建议的第一件事是，在你对元素做任何事情之前，确认你确实正在处理预期的row（tr）元素，并且只调用.show（）或.hide（）如果你是某些你的（this）引用指向你期望的元素。其次，可能使你的.each（）选择运行得更快的一种方法是只在该级别选择表的行，然后在第一个each（）块中进行健全性检查，以确保你有效在行中，您正在使用的行中的列具有有效值。如果你有一个任何重要大小的页面，这可能会使循环更快，因为jQuery可以选择使用native的元素来获得这些级别的元素。

Answer 4

这可能不是一个答案，但我已经做了jsfiddle，它适用于所有浏览器（IE7-> 9，FF，Chrome）。

我对你的代码进行了一些优化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();
        }

    });
}

使用.hide（）完全崩溃了IE 8

4 个答案: