Javascript SlickGridの行のCSSを変更したい

Question

前提・実現したいこと

JavascriptのSlickGridにて特定の条件にて行単位のCSSを変更したいのですが、
実装方法が分からなく困っています。
★部分で該当行に対してCSSを追加する事はできたのですが、設定済みのCSSを削除する実装方法が分からなく困っています。
★の条件に該当した際に、設定済みのCSSを削除する方法はありますでしょうか。

2021/12/13
質問が分かりづらく申し訳ありません。
HTML側のソースとCSS側のソースも記載しました。
HTMLのソースは、javascriptの★部分の条件反映後の内容です。

alertrowというCSSを反映させたいのですが、
既にoddというCSSがあるとalertrowの色設定が有効にならないので、
oddというCSS設定を削除したいです。もしくは他の色設定方法があるのであればご教示頂きたいです。

該当のソースコード

function createGridWithMetadata(gridId, columns, data, options, pager) {
    var dataView = new Slick.Data.DataView();
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();

    var gridObj;
    dataView.setPagingOptions({ pageSize: 10 });
    new Slick.Controls.Pager(dataView, gridObj, pager);

    dataView.onRowCountChanged.subscribe(function (e, args) {
        gridObj.updateRowCount();
        gridObj.render();
    });

    dataView.onPagingInfoChanged.subscribe(function (e, args) {
        var offset = args.pageSize * args.pageNum;
        gridObj.rowOffset = offset;
        grid.getSelectionModel().setSelectedRanges([]);
    });

    dataView.onRowsChanged.subscribe(function (e, args) {
        gridObj.invalidateRows(args.rows);
        gridObj.render();
    });

    dataView.getItemMetadata = function (row) {
        item = dataView.getItem(row);
        if (item.columnInventory != undefined && item.stockQty != undefined && item.orderQty != undefined) {
            var Qty = item.stockQty - item.orderQty;
            if (Qty < 0) {
                //★
                return { cssClasses: 'alertrow' }
            }
        }
    }
    gridObj = new Slick.Grid(gridId, dataView, columns, options);
    return gridObj;
}

.odd {
  background-color:yellow;
}
.alertrow {
  background-color:indianred;
}

<div class="odd alertrow" style="top:120px">
 <div class="slick-cell l0 r0"><a href="#s" onclick="linkClick(4);" data-toggle="modal" data-target="#s" style="text-decoration: underline; color:blue;">532978</a></div>
 <div class="slick-cell l1 r1">商品A</div>
 <div class="slick-cell l2 r2 text-right">6</div>
 <div class="slick-cell l3 r3 text-right">15</div>
 <div class="slick-cell l4 r4 text-right">-9</div>
</div>

Comments

[退会済みユーザー]

まず、何はともあれ、コードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなるので。

[tatsu12345]

ご指摘ありがとうございます。修正しました。

[退会済みユーザー]

ASP.NET Core MVC の話から JavaScript 部分を切り離して SlickGrid とやらの質問に絞ったのですね。自分の守備範囲を超えてますので、お役に立てずすみませんが、他の方の回答をお待ちください。

[tatsu12345]

とんでもございません。ご確認頂きありがとうございます。

[Lhankor_Mhy]

SlickGrid とはこれですか？
http://slickgrid.net/

[tatsu12345]

はい。その通りです。

[Lhankor_Mhy]

item が undefined になっている、ということでいいですか？

[tatsu12345]

ご確認ありがとうございます。
改めて確認したところ、itemには値が入っており★欄の条件に合致する事が確認しました。
大変失礼致しました。
もう一点の質問内容に限定しましたので、再度ご確認をお願いできますでしょうか。

[Lhankor_Mhy]

上書きすればいいのではないかと思うのですが、ダメですか？

[tatsu12345]

ご確認ありがとうございます。
上書きできれば確かに良いと思うのですが、上書きの方法が分からず困っています。
現状のコードはCSSの追加のみになってしまっています。
上書きの方法が分かればご教示頂けないでしょうか。

[Lhankor_Mhy]

background: red
を打ち消したいのであれば、
background: white
などとすればいいのではないかと思いましたが、そのような簡単な話ではないのですか？

[tatsu12345]

ここの★内でbackgroundの設定ができなかったのですが、可能であればコードを教えて頂けないでしょうか。

[Lhankor_Mhy]

上に書いた通りではないかな、と思うのですが、私が問題を共有できていない感じですか？

Answer 1

こういうことでしょうか？

.alertrow{
  background: red;
}

Comments

[tatsu12345]

分かりづらく申し訳ありません。
HTMLとCSSの内容及び質問内容を具体的にしました。
再度ご確認頂けると幸いです。

[Lhankor_Mhy]

CSSには「後書き優先」という原則があります。
書く順番を変えてみてはどうでしょうか。

[tatsu12345]

既にoddは書かれている前提で、順番を変える事は難しくなっています・・・
★部分のタイミングでalertrowを追加、oddを削除する方法があれば理想です。

[Lhankor_Mhy]

いえ、そうではなくて、CSSのルールの順番です。

[Lhankor_Mhy]

わかりにくいですかね？

.hoge{
background: red;
}
.hoge{
background: white;
}

と書いてあると白くなりますが、

.hoge{
background: white;
}
.hoge{
background: red;
}

と書いてあると赤くなるんです。

---

JavaScript がどんなタイミングでクラスを追加したか、というのは全く関係ないです。
時系列ではなくて、記述順です。

[tatsu12345]

odd、alertrowの順番で記述されているはずなんですけど。
もう少し調べてみます。ありがとうございます。

[Lhankor_Mhy]

そうなんですね。
ご提示のコードは順番が逆なので、誤解されやすいと思いますよ。

[tatsu12345]

ご指摘ありがとうございます。
変更しておきました。

[Lhankor_Mhy]

CSS詳細度の問題のような気がしますが、とりあえず手っ取り早く !important を使ってはどうでしょうか。
http://pepabo.github.io/css/specificity/

[tatsu12345]

ご回答ありがとうございます。
ご指摘のようにCSS詳細度の問題で、alertrowに!importantを追加したら実現できました！
勉強不足なところ、お付き合いいただき感謝します。
ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

コードは書いてあるままにご提示された方が問題解決につながりやすいことが多いので、そのようにお心がけになるといいかと思います。老婆心ながら。