CODEWITHSUNDEEP
jquery
coson
coson

Reputation: 8659

Simple plugin not working

Good Day,

I'm trying to write this simple plugin to highlight a table row when you click on the cell:

(function ($) {

    $.fn.rowHighlighter = function (options) {

        // Establish our default settings
        options = $.extend({
            text: 'Hello, World!',
            color: null,
            fontStyle: null,
            tableClass: null,   // tableClass = '.cardNumbers', columnValue = 'cardNo'
            columnValue: null,
            rows: null
        }, options);

        return this.each(function () {

            console.log('Inside rowHighlighter plugin...');

            $(this).on('click', '#excelTable tr', function (e) {
                $('#excelTable tr').removeClass('highlighted-cell');
                $(this).addClass('highlighted-cell');
            });
        });
    };
})(jQuery);

The code itself works when it's outside of the plugin. I've verified that the css is valid.

I have a table that gets generated but the main table tag:

<table id="excelTable">
</table>

I register the plugin with the table:

$(function() {
    $('#excelTable').rowHighlighter();
});

Upvotes: 0

Views: 28

Answers (1)

talkhabi
talkhabi

Reputation: 2759

If your purpose is just highlight clicked tr, try this :

(function ($) {

    $.fn.rowHighlighter = function (options) {

        // Establish our default settings
        options = $.extend({
            text: 'Hello, World!',
            color: null,
            fontStyle: null,
            tableClass: null,   // tableClass = '.cardNumbers', columnValue = 'cardNo'
            columnValue: null,
            rows: null
        }, options);

        return $(this).each(function (i,table) {

            var trs = $(table).find('tr');

            $(trs).on('click',function(){
                $(trs).removeClass('highlighted-cell');
                $(this).addClass('highlighted-cell');
            });

        });
    };
})(jQuery);

Demo

Upvotes: 1

Related Questions