Using DOM to insert a DIV within a TD

[phub11]

Hi all,

I am dynamically creating a DIV within a newly added row to a previously created table. I'm stuck with the correct syntax. Below is my current effort:

function gradType(obj) {
insertDiv = document.createElement("div");
                if (obj=="0") {
insertdiv = document.getElementById("insert");
while(insertDiv.firstChild)
{
insertDiv.removeChild(insertDiv.firstChild);
}
               return; 
        } else if (obj=="1") {
//add row to table and populate with inputs
cnt++;
var table = document.getElementById("yourtable");
var rowCount = table.rows.length;  
var addRow = table.insertRow(rowCount);
addRow.id = cnt-1;
var addCell = addRow.insertCell(0);
addCell.colSpan = 3;
addCell.innerHTML = '<div id="insert">Compund:<input name="Xcomp[]" id="alt" type="text"></div>';

addCell.appendChild(insertDiv);

                return;
        }
}

Thanks in advance for any help!

[acoder]

insertDiv on lines 5 and 7 should be insertdiv (you should probably use another name to avoid confusion). Move line 2 to where you want to create the div (unless you're happy with innerHTML).

[phub11]

Thanks for the reply but I'm still stuck. I'm basically trying to insert cells into an existing table, and place them within a DIV so these new cells can be easily removed later. Below is more succinct code which is supposed to add a row of 2 cells to a table that already has cells, and keep the new cells within a single DIV:

var table = document.getElementById("yourtable");
var rowCount = table.rows.length;  
var addRow = table.insertRow(rowCount);
insertDiv = document.createElement("div");
insertDiv.id = "insertedDIV";
var addCell = addRow.insertCell(0);
addCell.innerHTML = 'HELLO';

var addCell = addRow.insertCell(1);
addCell.innerHTML = 'GOODBYE';

//Now color just the new cells - NOT all cells within the table
insertDiv.style.background='rgb(128, 128, 128)';

Thanks!

[Canabeez]

You cannot place cells inside a DIV, if you want to quickly remove them later, remove the row. Plus in the code, I can't see any usage of the DIV you created.

[phub11]

Thanks for the reply.

Yes, I am confused as to how to start a DIV, insert nodes(?) such as cells into the DIV, and then close the DIV.

So as to help me better understand the subtleties of the DOM, could someone adapt the above code so the contents of just one cell is placed inside the new DIV? Or, give a link to a page that has a similar example (I can't find anything thru Google).

Thanks!

[Dormilich]

wouldn’t it be easier to pass a class or id to the newly created cells to get rid of them easier?

[acoder]

As Canabeez mentioned, you can't insert a table cell inside a div - well, you could try with innerHTML, but it'd be incorrect HTML and you can't be certain what to expect.

If the only reason you want to create a div is to be able to access it later to remove its contents, then give the cell a unique ID instead of creating a div.

As for your question about closing the div, that's done automatically. document.create Element creates a whole element/object which you can add properties to - don't think in terms of HTML strings.

[Canabeez]

In addition to acoder.

You could also use the "name" parameter for the cells. Name all the cells you'd like to delete later with a same name like myCell, and then just:

[code=javascript]
function deleteCells()
{
var myCells = document.getEle mentsByName('my Cell');
for(var i=0;i<meCells.l ength;i++){myCe lls[i].parentNode.rem oveChild(myCell s[i]);}
}
[/code]

Didn't test it, but I think this should work fine ;)

Good luck

[phub11]

Thanks for the the replies!

I'm working out a way to keep track of inserts by giving parent rows IDs, and deleting their daughters automatically. Its a lot more complicated than using DIVs, but the code is now *almost* working.

Thanks again to all those who responded.

[phub11]

Hi again,

A quick follow-up question:

I have a routine that creates "parent" rows in a table and assigns them a unique row ID. I then have a sub-routine that can insert multiple "daughter" rows in between "parent" rows that don't have row IDs. I have successfully figured out how to determine a selected "parent" row by using:

parentRowID = element.parentN ode.parentNode. id;

I now want to check if the next row down has a row ID assigned (i.e., is the next row down a "daughter" row?).

Any suggestions on how to do this would be great!

Thanks

[phub11]

I've figured it out...

nextSibling