Firefox、jQuery 和 jqgrid 中的文本装饰问题 [英] text-decoration problem in Firefox, jQuery and jqgrid

问题描述

我遇到 Firefox 不显示样式text-decoration: line-through"的问题.

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

我正在使用 jqGrid 来显示药物列表.如果药物无效，则必须交叉.在我的 afterInsertRow 事件中，我这样做:

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' }) 

在 IE 和 Chrome 上运行良好，但 Firefox 只显示红色文本而没有交叉线.

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

当我查看 firebug 输出时，我可以看到 <tr> 元素具有包括文本装饰在内的样式定义，但它根本没有按我需要的方式显示.

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.

推荐答案

如果你修改你的代码为

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

如果可行.如果你使用 rownumbers: true 并且不希望行号被删除线，你可以使用

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

还有一个小建议:使用 gridview: true 可以更快地填充 jqGrid.在这种模式下，包含的整个表将由 jqGrid 填充作为父级，并将通过一个 jQurey.append 操作插入.afterInsertRow 事件的使用打破了规则，因为 每一行 都会被插入一个 jQurey.append 操作，然后会被调用 插入行后.所以我的建议是:使用 gridview: true 而不要使用 afterInsertRow.要更改 css，请使用 loadComplete 或 gridComplete 代替:

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

这篇关于Firefox、jQuery 和 jqgrid 中的文本装饰问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！