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:

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
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.createElement 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:

Expand|Select|Wrap|Line Numbers

 
function deleteCells()

{

var myCells = document.getElementsByName('myCell');

for(var i=0;i<meCells.length;i++){myCells[i].parentNode.removeChild(myCells[i]);}

}

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.parentNode.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