text-decoration problem in Firefox, jQuery and jqgrid

Question

I have issue wuth Firefox not displaying style "text-decoration: line-through".

I am using jqGrid for displaying list of medications. If medication is not active, it has to be crossed. In my afterInsertRow event I do this:

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

It works fine for IE and Chrome, but Firefox displays only red text without crossing line.

When I look into firebug output, I can see that <tr> element has style definition including text-decoration, but it is simply not displaying the way I need.

Answer 1

If you modify your code to

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

if will works. If you use rownumbers: true and don't want the row number be strikethrough, you can use

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

One more small recommendation: use gridview: true to fill jqGrid more quickly. In this mode the whole table contain will be filled by jqGrid as a siring and will be inserted with one jQurey.append operation. The usage of afterInsertRow event break the rule, because every row will be inserted with a jQurey.append operation and then will be called afterInsertRow. So my recommendation: use gridview: true and don't use afterInsertRow. To make changes of css use loadComplete or gridComplete instead like:

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