Using !important to a CSS change in JQuery - Using Bootstrap 3

Question

Using MVC 5 and Bootstrap 3

I am trying to make a table row red, but due to my table having the table-hover class, the table-hover affect turns the row back to the initial color on a mouseover. I want to temporarily overrule that effect for my script.

function deleteFunction(element) {
    var newID = $(element).closest("td").find("span.ID").text();

    $(element).closest("tr").css('background-color', 'red');

    $(document).ready(function () {
        var answer = confirm("Are you sure you want to delete this movie?");
        if (answer) {
            $.post(
        '@Url.Action("customDelete", "Movie")',
        {
            'id': newID
        },
        function (data) { },
        "json"
        );
            $(element).closest("tr").remove();
            return true;
        } else {
            $(element).closest("tr").css('background-color', 'initial');
            return false;
        }
    });
}

these two items need the !important, but I am not sure how to do this in JQuery

$(element).closest("tr").css('background-color', 'red');

$(element).closest("tr").css('background-color', 'initial');

EDIT - ANSWER

The reason I could not get this to work was because my table was using table-hover, to fix this I had to toggle the hover class on and off.

$(element).closest("table").toggleClass("table-hover");

Whenever you feel you need `!important` it's best to take another look, or it could be the beginning of a specificity war. There's *always* an alternative. — Wesley Murch, Jun 02 '14 at 17:34
Okay! I am still new to most of this stuff so I only learned about !important a few minutes ago haha. Thanks for the notice though! — Austin, Jun 02 '14 at 17:37
In regards to the duplicate post. None of those post's solutions work. I need something that can override bootstraps `table-hover`. — Austin, Jun 02 '14 at 17:58
Just to get by this, try adding a class and in your CSS file use `!important`. You just need to use a selector more specific than the one bootstrap uses. You may need to look at their source code to see how they apply the class. You may need `:hover` even. — Wesley Murch, Jun 02 '14 at 18:10
Yea I think I will have to mess with :hover, as !important (regardless of where I stick it) does not trump table-hover. :/ thanks though! — Austin, Jun 02 '14 at 18:24
Fun fact: I figured out how to deal with hover, you gotta toggle it on/off `$(element).closest("table").toggleClass("table-hover");` — Austin, Jun 02 '14 at 20:18

score 0 · Answer 1 · answered Jun 02 '14 at 17:32

0

You can only add/change class on trs and than is CSS you can use what you need.

$(element).closest("tr").addClass('red');

CSS: .red {background-color: red;}

answered Jun 02 '14 at 17:32

pavel

26,538
10
45
61

I agree, it's better to add/remove classes and do all the CSS stuff in your CSS. Just don't use class names like `red`... maybe one like `delete-pending` – Wesley Murch Jun 02 '14 at 17:32
AH okay, my colleauge wasn't sure if doing an override or adding/removing classes was a better route – Austin Jun 02 '14 at 17:34
Do I still need to add an override to this? That alone does not solve it. – Austin Jun 02 '14 at 17:36

Using !important to a CSS change in JQuery - Using Bootstrap 3

1 Answers1