adding new table row to parent window 1

[project3]

I'm trying to write to the parent window which I can do if I set up a text box in parent window and write to that.

But instead of having a bunch of text boxes to fill I would rather create new table rows inside a certain table each time the info from child window is selected.

Can I do this or should i just use the text boxes inside
the table?

 

[dwarfthrower]

You can write directly to a table cell by setting it's innerHTML property where you would normally set an input's value property.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[Lowet]

I would change the cell innerHTML or as you said, create a new row. It depends how you want it to look like. But I don't think it's a good idea to make a new TABLE every time..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[j4606]

orly?

 

[Lowet]

Hey, where did you get air from j4606?? Or do you only know these words "orly"?

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[project3]

yes but how do I create a new row. I only am familar with document write and I know that wont work.

 

[dwarfthrower]

Yes, you'll need to familiarise yourself with the DOM (document object model)

w3schools has a good tutorial section:

http://w3schools.com/htmldom/default.asp

http://w3schools.com/htmldom/dom_obj_table.asp

Basically you build the objects up then append them or insert them into the document.

So to create a simple table:

//Make a table
var objTable = document.createElement("table");

//And a table body
var objTbody = document.createElement("tbody");

//Create one row
var objRow = document.createElement("tr");

//Make some cells and put them in the row
var cell1 = document.createElement("td");
cell1.innerHTML = "one";
objRow.appendChild(cell1);

var cell2 = document.createElement("td");
cell2.innerHTML = "two";
objRow.appendChild(cell2);

var cell3 = document.createElement("td");
cell3.innerHTML = "three";
objRow.appendChild(cell3);

//put the row in the table body
objTbody.appendChild(objRow);

//put the table body in the table
table.appendChild(objTbody);

//append the table to the document's body
document.body.appendChild(table);

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[Lowet]

You can also use the special table DOM.

[navy]var tbl,row,cell1,cell2,cell3;

[green]// Get table[/green]
tbl = document.getElementById('mytable');

[green]// Or if you want to create one instead[/green]
tbl = document.createElement('table');
document.body.appendChild(tbl);

[green]// Create a row[/green]
row = tbl.insertRow(0);

[green]// Create cells[/green]
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);

[green]// Add content to cell1[/green]
cell1.innerHTML = 'cell content';
[/navy]

Then you can also access the row with [tt][maroon]tbl.rows(0)[/maroon][/tt] and cell with [tt][maroon]tbl.rows(0).cells(0)[/maroon][/tt]..


- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[project3]

awesome. thank you very much!

 

[project3]

ok cool I got that to work. but it always adds at top I understand how to change the variable to get to bottom row. but heres the thing. when the next item is added the row number would change.

Ive looked for DOM to count rows but dont see that.

 

[dwarfthrower]

objTbody.getElementsByTagName("tr").length

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[project3]

I did it a little different though. thanks

var tbl=opener.document.getElementById('myTable');
var lastRow = tbl.rows.length;

 

[Lowet]

var lastRow = tbl.rows.length;

This will actually fail.
In a table with 5 rows, the indexes goes from 0-4.

The proper code is:

var tbl=opener.document.getElementById('myTable');
var lastRow = tbl.rows.length[olive]-1[/olive];

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[project3]

K ill switch it around but it worked just fine. I tested it and tested it with adding more and more.

 

[Lowet]

OK, great.
But remenber that indexes allmost allways starts at 0.
So to get the last item you use the [tt][maroon]length-1[/maroon][/tt].

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[trollacious]

project3's code is correct to get the index of the row to add.

Lee

 

[kaht]

You know Lee, if Lowet gave you a star for every time you corrected him, I think you'd be top MVP

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[Lowet]

yeah, if it is the one to add.. he wrote [tt][maroon]lastRow[/maroon][/tt] so I assumed that was the last row not the new row to be added... if he would write [tt][maroon]var newRow = tbl.rows.length-1;[/maroon][/tt], i would understand it the same as you..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]