new jQuery plugin (idea only)

A plugin to show/hide specific columns on a table.
On a project I have some tables with a lot of columns. I want the possibility to select which columns are displayed and which are not - as some of the users dont want to see all of them.
I haven’t found anything suitable yet, so I probably just try to write something.

Something along the lines of this:

<script type="text/javascript">
(function($)
{
	$.fn.toggleCol = function(colNum) {
		colNum--;
	    return this.each(function()
		{
			$('tr', this).each(function(){
				$('td:eq(' + colNum + '),th:eq(' + colNum + ')', this).toggle();
			});
	    });
	};
})(jQuery);
</script>

Any suggestions? :)

4 Responses to “new jQuery plugin (idea only)”

  1. why do you place the $.fn.toggleCol function inside another function ‘function($)’ which in turn is enclosed in parenthesis? and what does the ‘(jQuery)’ do? i.e what does the outer function ‘(function($){…})(jQuery)’ do?

    thanks.

  2. the ‘(function($){…})(jQuery)’ is creating an anonymous function and calling it right away with jQuery as parameter.
    it’s basically the same as:
    var foo = function($){…}
    foo(jQuery);
    this way I can use the $ alias safely, even if the $ variable is globally used by another function/library.
    it’s explained more detailled here.

    the other benefit is that I can define variables inside the anonymous outer function which are accessible from the $.fn.toggleCol function like global variables but are’nt globally accessible. (I hope i explained that right)

  3. I find your table plugins realy fine.
    I currently have to work a lot with html tables.
    Have you ever thought to write some selector/filter plugin so that indirect references to tables are easier to access?

    e.g. select the cell(s) where the row header is “willi” and the column header in the second row is salary
    by default it is the first header (but there may be more and also spanned)

    something like this:
    $(”table.#tableone th.col:eq(2):contains(”salary”) && th.row:contains(”willi”) td”).addClass(”red”)

    Thx & regards, Willi

  4. No, I haven’t thought about this yet.
    I don’t even have an idea how to do or use it. Writing a plugin for this is probably easier than adding new selectors (never tried doing that). Maybe something like $(”#tableone”).searchCell(”willi”, “salary”).
    Having more than one header is certainly complicating things.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Syntax Highlighting: You can use [js] .. [/js] and [html] .. [/html] for posting code snippets.