How to add hover effect on <table> using CKEditor?

Question

I am drawing a table in CKEditor.

You can see that my current table looks like this.

Currently, I want to hover over the columns of the table and it will automatically highlight the validation icon with orange.

I managed to change CSS:

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

I do not know how to apply in the table.

My table has a structure like:

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>

Answer 1

Here is a script to highlight columns where there are checkmarks with an orange background.

var CKE = $( '.editor' );
CKE.ckeditor();
var columnIndex=0;

$("#update").click(function(){
    // Output CKEditor result in a result div
    $("#result").html(CKE.val());

    // If there is a table in the result
    if( $("#result").find("table") ){
        console.log("Table found.");

        // On mouse over a td
        $("#result").find("td").on("mouseover",function(){
            // find the column index
            columnIndex = $(this).index();

            // Condition is to ensure no highlighting on the 2 firsts columns
            if(columnIndex>1){
                $(this).closest("table").find("tr").each(function(){
                    var thisTD = $(this).find("td").eq(columnIndex);

                    // If cell is not empty
                    //     is the html entity for a space
                    //   CKEditor always insert a space in "empty" cells.
                    if( thisTD.html() != " " ){
                        thisTD.addClass("highlight");
                    }
                });
            }

            // Clear all hightlights
        }).on("mouseout",function(){
            $(this).closest("table").find("td").removeClass("highlight");
        });
    }

    // Console log the resulting HTML (Usefull to post HTML on StackOverflow!!!)
    console.log("\n"+CKE.val())
});

I took the time to make a demo based on your table.
Please write your HTML next time !!!

See a working demo of CodePen