проблема оформления текста в Firefox, jQuery и jqgrid

Question

У меня проблема с тем, что Firefox не отображает стиль «text-художественное оформление: сквозной».

Я использую jqGrid для отображения списка лекарств. Если лекарство не активно, его нужно пересечь. В моем событии afterInsertRow я делаю это:

$('#' + rowid).css({ 'text-decoration': 'line-through', 'color': 'red' }) 

Отлично работает для IE и Chrome, но Firefox отображает только красный текст без пересекающихся линий.

Когда я смотрю на вывод firebug, я вижу, что элемент <tr> имеет определение стиля, включая оформление текста, но он просто не отображает, как мне нужно.

Answer 1

Если вы измените свой код на

$('#' + ids[1] + " > td").css(
    { 'text-decoration': 'line-through', 'color': 'red' });

если будет работать. Если вы используете rownumbers: true и не хотите, чтобы номер строки был зачеркнут, вы можете использовать

$('#' + ids[1] + " > td:not(.jqgrid-rownum)").css(
    { 'text-decoration': 'line-through', 'color': 'red' });

Еще одна небольшая рекомендация: используйте gridview: true, чтобы быстрее заполнить jqGrid. В этом режиме вся содержащаяся таблица будет заполнена jqGrid как ссылка и будет вставлена ​​с одной операцией jQurey.append. Использование события afterInsertRow нарушает правило, поскольку каждая строка будет вставлена ​​с операцией jQurey.append, а затем будет называться afterInsertRow. Поэтому моя рекомендация: используйте gridview: true и не используйте afterInsertRow. Чтобы внести изменения в css, используйте loadComplete или gridComplete вместо:

jQuery('#list').jqGrid({
    //...
    loadComplete: function() {
        var ids = jQuery('#list').getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            $('#' + ids[i] + ' > td:not(.jqgrid-rownum)').css(
                { 'text-decoration': 'line-through', 'color': 'red' });
        }
    }
    // ...
});