I'm trying to get an understanding of jQuery modules, so I thought I'd
start simple (perhaps too simple...)

Anyway, here is what I have:

jQuery.table.js:

(function($) {
  $.Table = {
    build: function(settings) {
      var table = $('<table class="testTable"></table>');
      var headRow = $('<tr></tr>').appendTo(table);
      var rhcol_one = $('<th>' + settings.rhcol1 + '</
th>').appendTo(headRow);
      var rhcol_two = $('<th>' + settings.rhcol2 +'</
th>').appendTo(headRow);
      var row_one = $('<tr></tr>').appendTo(table);
      var r1col_one = $('<td>' + settings.r1col1 + '</
td>').appendTo(row_one);
      var r1col_two = $('<td>' + settings.r1col2 + '</
td>').appendTo(row_one);

      return $(table);
    }
};
})(jQuery);

function testthisout() {
  $("body").append('<p> Whopee! </p>');
  $("body").append(jQuery.Table.build({
    rhcol1: 'Header 1',
    rhcol2: 'Header 2',
    r1col1: 'Row 1 Col 1',
    r1col2: 'Row 1 Col 2',
  }));
}

I then have a simple html page built with a link whose onclick calls
testthisout.

Now maybe I'm misunderstanding things, but if I want to be able to
chain stuff onto my "table" module, I need to return a jQuery object
from it.  I *think* that that is what I'm doing, as far as I can
understand things.  Can anyone confirm this?

Also, is there a cleaner way to hide all the rhcol1...etc stuff?  I
want to be able to pass information along that way, but when I append
the table I want to do it like: $
("body").append(jQuery.Table.build(my_table_info)).doSomethingElse(my_other_stuff)
(etc etc etc).  Should I just build all that info into a var and
that's it?

I'm trying to avoid buildDOMxxxxxElement calls.  Is there a better way
to do that than what I'm trying?  jQuery just seems a lot nicer than
that.

I appologize if this seems noobie-ish.  In truth I'm going to be
building more complex modules; I just want to get a firm grasp on this
at a simple level before I dive into that.

Reply via email to