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

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.

If you want to sort tables I think you will be better off using some table sorter plugin (there are tons of them), like sandbox.scriptiny.com/sorter/index.html — serg
– serg, Commented May 20, 2011 at 21:30
Well, I'm not really going to sort the table so much as grab each row and rebuild a new table the way I'd like it laid out. Thanks for the link though, I'm sure that will come in handy at some point. — Darin
– Darin, Commented May 20, 2011 at 21:35
@serg - you don't think the chrome extension tag was appropriate? This is an extension and I do not have access to the HTML on the server side. — Darin
– Darin, Commented May 20, 2011 at 21:50
It looks like a pure javascript problem, being chrome extension or not doesn't change anything. You are asking for js solution, so it is clear that changing html on the server side is not an option. Feel free to add tags back if you like. — serg
– serg, Commented May 20, 2011 at 22:01

Nicholas Carey · Accepted Answer · 2011-05-20 20:50:04Z

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!

answered May 20, 2011 at 20:50

Nicholas Carey

75.1k16 gold badges96 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Darin Over a year ago

Thanks Nicholas. Getting the tr html is not a problem. I already have the code for that worked out and I can manipulate the row and the data in the row.

Darin Over a year ago

If possible, I'd like to do this purely with javascript. I have jquery downloaded and available but I'm not ready to tackle it yet. Once I have the extension worked out with javascript I plan on revamping it with jquery and a ui script (like maybe yui) to make it better and look good.

Hogan Over a year ago

@Darin -- this sounds like a good plan, but it is a bad one. If you take the time to use jQuery now it will cut your project time in half. It is exactly this kind of work that jQuery makes much easier. True it also helps to make cross browser UIs, but manipulating HTML -- that is Query in jQuery.

Darin Over a year ago

Well, as I said, I'm open to all suggestions. Nicholas didn't really answer my primary question though. I already have the code to capture the tr. Thanks Hogan.

Nicholas Carey Over a year ago

If you want to move a <tr> from one table to another or within the table, jQuery offers a plethora of DOM manipulation methods: before(), after(), append(), prepend(), appendTo(), prependTo(), insertBefore(), insertAfter(). the before/after methods insert DOM nodes as siblings of the target. The append/prepend methods insert DOM nodes as children of the target. The multiple flavors of each have to do with the point of reference: content or target nodes.

|

serg · Accepted Answer · 2011-05-20 22:29:56Z

1

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 = [];
}

answered May 20, 2011 at 22:29

serg

112k78 gold badges326 silver badges337 bronze badges

1 Comment

Darin Over a year ago

Excellent! I like what you've got. What about an array(?) or maybe another object to contain the vnlItemOnPage objects?

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related