Dynamically creating Tables using DOM 1

[sirlojik]

Hi all, i just wrote down this function using javascript and DOM, it will help u lads create tables dynamically and faster. lemme know if i should improve it to suit needs.

createTable = function (pID,cols,rows)
   {
   var _tab = document.createElement('table');
   var _bdy = document.createElement('tbody');
   for (var n = 0;n<cols;n++)
       {
       var tr = document.createElement('tr');
       for (var x=0;x<rows;x++)
           {
           var td = document.createElement('td');
           td.innerHTML ='&bsp';
           td.style.backgroundColor =clr1;
           td.attachEvent('onmousedown',tr_md);
           tr.appendChild(td);
           }
       _bdy.appendChild(tr);
       }
   _tab.setAttribute('border',1);
   _tab.appendChild(_bdy);
   pID.appendChild(_tab);
   return _tab;
   }

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...

 

[BillyRayPreachersSon]

Not bad - but there are a few things that are not quite right with it, or could do with some explanation:

- You appear to have mixed up your row and column loops - you are creating TR elements for every column, and TD elements for every row - this should be the other way round.

- "&bsp;" is not a valid character entity

- "clr1" does not exist.

- Why go to the trouble of using DOM methods to create the table, only to use innerHTML to set the content of the cells? If you're going to the trouble of using DOM methods to create the table, why not do the whole thing with DOM methods?

- You don't say what pID is, and while I can work it out, it's not exactly obvious from the name what it does. Others who may want to use this script would benefit from knowing this, I'd say.

- Why would you want to append the finished table to pID, and return a copy?

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsdragon]

BRPS: I can answer that last question. It very common practice to return a reference to something that you've created like this, so that it can be used in an expression, like

createTable("myid",3,5).style.borders = "1px solid gray";

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[sirlojik]

//-------------------------
//Function: createTable
//Parameters: [red]pID->[/red][blue]This is the parent element to which ur appending the table[/blue]
//            [red]rows->[/red][blue]Number of rows[/blue]
//            [red]cols->[/red][blue]Number of cols[/blue]
//-------------------------

createTable = function (pID,rows,cols)
   {
   var _tab = document.createElement('table');
   var _bdy = document.createElement('tbody');
   for (var n = 0;n<rows;n++)
       {
       var tr = document.createElement('tr');
       for (var x=0;x<cols;x++)
           {
           var td = document.createElement('td');
           tr.appendChild(td);
           }
       _bdy.appendChild(tr);
       }
   _tab.setAttribute('border',1);
   _tab.appendChild(_bdy);
   pID.appendChild(_tab);
   return _tab;	
   }

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...