-1

I have some problem with this JQuery script (on a project that use Jquery-1.9.1.min.js): 

$(document).ready(function () {
    $("thead.opening").click(function () {

        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        alert("INTO second function, chrome: " + is_chrome);

        $(this).next().css('width', '10000000em');
        $(this).next().css('display', 'table-row-group');

        //$(this).next().css('display', is_chrome ? 'table-row-group' : 'table-row-group');

        //alert($(this).next().css('display'));
    });
});

This script simply set a CSS style to the tbody element related to the clicked thead element, and do it in this way:

$(this).next().css('display', 'table-row-group');

It works but I have to set also the !important for this CSS property but if I do in this way it can't work:

$(this).next().css('display', 'table-row-group !important');

So searching online I found this post on StackOverflow: How to apply !important using .css()?

So, into the previous script, I tryed to use:

$(this).next().style('width', '10000000em', 'important');
$(this).next().style('display', 'table-row-group', 'important');

instead:

$(this).next().css('width', '10000000em');
$(this).next().css('display', 'table-row-group');

But the problem is that I obtain this wrong result:

<tbody class="expanded" style="display: block; width: 1e+7em;">

So it seems that the width property is correctly setted but the display property not (infact it is setted on block and not on table-row-group)

Why? What am I missing? How can I fix this issue?

Tnx

Community
  • 1
  • 1
AndreaNobili
  • 40,955
  • 107
  • 324
  • 596

1 Answers1

5

I suggest creating a class like the following:

CSS

.forceDisplay { display: table-row-group !important; }

Then use jQuery's addClass() method to apply the !important declaration.

$('#element').addClass('forceDisplay');
nickfogle
  • 146
  • 1
  • 9