Question

I’m new to javascript so let me just say that right up front.

A web site I frequent has 50 or so items, with details about that item, in a table. Each table row contains several td cells. Some rows have types of things that are similar, like USB drives or whatever. I want to capture each row so that I can group and reorder them to suit my tastes.

I have this object:

function vnlItemOnPage(){
  this.Category = "unknown";
  this.ItemClass = "vnlDefaultClass";
  this.ItemBlock = {};
}

This represents one row.

What I’ve been trying to figure out is how to capture the block of html < tr>stuff< /tr> and save it into this.ItemBlock.

That part is pretty easy:

vnlItemOnPage.ItemBlock = element.getElementByClassName('className')[0]

?

That seems pretty straight forward. Am I missing something?

This part I am stuck:

There’ll be 50 of them so I need an array of vnlItemOnPage?

vnlAllItems = ???

var vnlAllItems = [vnlItemOnPage]?

And, how would I add to the array and delete from the array? I probably wont delete from the array if that is complicated don’t bother with it.

Once I capture the < tr> html, I can just append it to a table element like so:

myTable.appendChild(vnlAllItems[0].ItemBlock);

Correct?

I’m open to any suggestions if you think I’m approaching this from the wrong direction. Performance is not a big issue – at least right now. Later I may try to conflate several pages for a couple hundred items.

Thanks for your assistance!

[edit]

Perhaps the second part of the question is so basic it’s hard to believe I don’t know the answer.

The array could be: var vnlAllItems = []

And then it is just:
var row1 = new vnlItemOnPage;
vnlAllItems.push(row1);
var row2 = new vnlItemOnPage;
row2.ItemBlock = element.getElementByClassName(‘className’)[0];

I’d like to close the question but I hate to do that without something about handling the array.

Answer 1

JQuery is your friend here.

This will give you the inner HTML for the first row in the body of your desired table:

var rowHtml = $('table#id-of-desired-table tbody tr:first').html() ;

To get the outer HTML, you need a jQuery extension method:

jQuery.fn.outerHTML = function() {
  return $('<div>').append( this.eq(0).clone() ).html();
};

Usage is simple:

var rowHtml = $('table#id-of-desired-table tbody tr:first').outerHtml() ;

Enjoy!