Tabulator セルのマウスオーバーで文字を反転表示

 

 

 

マウスが乗ったセルを反転させて強調表示させるため、組込みの関数を探してみましたが、ないようなので、StackOverFlowの投稿を参考にして、cellのformatterでエレメントにCSSのクラスを追加したり削除したりさせてみました。

< コード例 >
CSS


  /* tabulator セル文字反転用 */
  .text_reverse {
    color: white;
    background-color: black;
    
  }

Javascript


    // Airport name //
    {title: 'Name', field: 'nmAirport', width: 180,
      formatter: function (cell, formatterParams, onRendered) {

        // 反転させて強調 //
        const cellelm = cell.getElement()
        $(cellelm).on("mouseover", function (e) {
          $(this).addClass("text_reverse")

        })
        $(cellelm).on("mouseout", function (e) {
          $(this).removeClass("text_reverse")
        })
        return cell.getData().nmAirport

      }

    },

< 画面例 >

 

 

 

 

 

画像には枠をつけてみました。

 

 

 

 

 



  /* tabulator 画像セル背景反転用 */
  .imgback_reverse {
    background-color: #B8E2E6;
    border: 1px solid #00a0a0;
  }

コメントを残す