Object - An Object in the Object - An array of those Objects

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.

---

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!

---

Not sure if it is what you are looking for, but if I wanted to manipulate table rows I would store:

• Row's whole html <td>1</td>...<td>n</td> as string so I can quickly reconstruct the row
• For each row store actual cell values [1, ..., n], so I can do some manipulations with values (sort)

To get row as html you can use:

var rowHtml = element.getElementByClassName('className')[0].innerHTML;

To get array of cell values you can use:

var cells = [];
var cellElements = element.getElementByClassName('className')[0].cells;
for(var i=0;i<cellElements.length;i++) {
    cells.push(cellElements[i].innerText);
}  

So the object to store all this would look something like:

function vnlItemOnPage(){
  this.Category = "unknown";
  this.ItemClass = "vnlDefaultClass";
  this.RowHtml = "";
  this.RowCells = [];
}