Использование .hide () полностью завершает работу IE 8 - PullRequest
Новая
       10

Использование .hide () полностью завершает работу IE 8

0 голосов
/ 05 декабря 2011

Я написал некоторый простой код 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();

Буду признателен за любую помощь, также, если я смогу предоставить дополнительную информацию, которая может быть полезной, пожалуйста, дайте мне знать.

Ответы [ 4 ]

2 голосов
/ 02 июля 2016

Мой коллега исправил эту проблему, используя setTimeout 

var mili = j$("li.autocompletehover", pnl).length > 0 ? 200 : 0;
setTimeout(function () {
   pnl.hide();
}, mili);
0 голосов
/ 05 декабря 2011

Я не уверен, почему у вашего кода проблемы, но я много раз делал проекты, которые делают hide () и show () для строки таблицы без каких-либо проблем в IE8.Первое, что я хотел бы предложить, это то, что перед тем, как вы действительно что-то сделаете с элементом, убедитесь, что вы действительно работаете с ожидаемым элементом row (tr), и вызывайте .show () или .hide (), только если выопределенная ваша (эта) ссылка указывает на элемент, который вы ожидаете.Во-вторых, и, возможно, способ ускорить процесс выбора .each () - выбрать только строки таблицы на этом уровне, а затем выполнить проверку работоспособности в этом первом блоке each (), чтобы убедиться, что у вас есть действительныйrow, столбцы в строке, с которой вы работаете, имеют допустимые значения.Это может потенциально сделать этот цикл намного быстрее, если у вас есть страница любого значительного размера, так как jQuery может выбрать элемент, используя native, чтобы добраться до этого уровня элементов.

0 голосов
/ 05 декабря 2011

Возможно, это не ответ, но я сделал это jsfiddle , и он работает во всех браузерах (IE7-> 9, FF, Chrome).

Я сделал несколько оптимизаций для вашего кода: 

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

    });
}
0 голосов
/ 05 декабря 2011

Я не уверен, что это ответ, но стоит попробовать - IE стремится использовать динамическую ширину таблицы.Может случиться так, что код для этого в IE8 конфликтует с show / hide.добавьте «table-layout: fixed» к стилю таблицы (css или напрямую) и вручную установите ширину tds в первой строке таблицы (которая должна иметь имена столбцов и, следовательно, не должна скрываться).С другой стороны, если вы уже вручную установили ширину таблицы, то вручную установите ширину всех, кроме последнего тд в этой первой строке.Если по какой-либо причине вы не можете или не хотите применять ширину к первому ряду tds, определите их с помощью colgroup перед первым tr таблицы.(веб-поиск в "colgroup" должен показать вам, как это сделать относительно быстро).

...