...

View Full Version : Dynamic Table



Sscorpius
12-06-2012, 11:04 PM
Hello everybody!
I'm in a bit of trouble with a dynamic table which i created this way:


var t=document.createElement("table");
t.setAttribute("id","tab");
var x, y, z, w;
var r=new Array();
var c=new Array();
r[0]=document.createElement('tr');
c[0]=document.createElement('td');
c[0].setAttribute("class","tabel");
x=document.createTextNode("Coloana");
c[0].appendChild(x);
c[1]=document.createElement('td');
c[1].setAttribute("class","tabel");
y=document.createTextNode("Text");
c[1].appendChild(y);
c[2]=document.createElement('td');
c[2].setAttribute("class","tabel");
z=document.createTextNode("Numar");
c[2].appendChild(z);
c[3]=document.createElement('td');
c[3].setAttribute("class","tabel");
w=document.createTextNode("Optiune");
c[3].appendChild(w);
r[0].appendChild(c[0]);
r[0].appendChild(c[1]);
r[0].appendChild(c[2]);
r[0].appendChild(c[3]);
t.appendChild(r[0]);
var j=0;
for (var i=1; i<n; i++)
{r[i]=document.createElement('tr');
r[i].setAttribute("class","tabel");
c[1]=document.createElement('td');
c[1].setAttribute("class","tabel");
x=document.createTextNode(++j);
c[1].appendChild(x);
c[2]=document.createElement('td');
c[2].setAttribute("class","tabel");
y=document.createTextNode(srand());
c[2].appendChild(y);
c[3]=document.createElement('td');
c[3].setAttribute("class","tabel");
z=document.createTextNode(Math.floor((Math.random()*100)+0));
c[3].appendChild(z);
c[4]=document.createElement('td');
c[4].setAttribute("class","tabel");
w=document.createTextNode(addDelete());
c[4].appendChild(w);
r[i].appendChild(c[1]);
r[i].appendChild(c[2]);
r[i].appendChild(c[3]);
r[i].appendChild(c[4]);
t.appendChild(r[i]);}
document.body.appendChild(t);

I want to add buttons in the cells of the last column, but the function doesn't work. This is it:


function addDelete()
{
var b=document.createElement("input");
b.setAttribute("type", "button");
b.setAttribute("value", "Delete");
b.setAttribute("id", "butoaneD");
var t=document.getElementById("table");
var aidi=t.getElementsByTagName("td");
aidi.appendChild(b);
}

What am i doing wrong?

BubikolRamios
12-07-2012, 02:28 AM
var aidi=t.getElementsByTagName("td");
aidi.appendChild(b);


The first line returns array !
So you are appending to array not to TD, even less to ALL TD-s.



aidi[0].appendChild(b);


That would probably do something, to fill all TD-s,you have to get everything into loop.

felgall
12-07-2012, 02:37 AM
Why are you using createElement to create the rows and cells rather than using inserRow() and insertCell() to add the rows and cells to your table?

The way you are doing not only involves lots more typing but the code also runs a lot slower in most browsers. Using the table methods for table manipulation results in much sorter earier to maintain code.

See http://javascriptexample.net/domtable12.php for an example of the simplest way to create a table using JavaScript

Sscorpius
12-08-2012, 11:25 AM
I know you're right, flegall, but i don't really want to start all over again now. I don't want a very performant code; if it works, that's a good start for me.

Meanwhile, i modified the addDelete() function and it looks like this:


function addDelete()
{
var b=document.createElement("input");
b.setAttribute("type", "button");
b.setAttribute("value", "Delete");
b.setAttribute("id", "butoaneD");
b.setAttribute("onclick", "removeRow()");
var el=document.getElementsByClassName("tabelcol");
for (var j=0; j<el.length; j++)
el[j].appendChild(b);

This works, but it places the button on each cell of the column at a turn and it stops at the last one. I wanted it to be placed on every cell of the column.

AndrewGSW
12-08-2012, 11:45 AM
You are appending the same node so it will only stick to the last cell. One way to do this is to clone the node (b), but ids must be unique:

function addDelete()
{
var b=document.createElement("input");
b.setAttribute("type", "button");
b.setAttribute("value", "Delete");
// b.setAttribute("id", "butoaneD");
b.setAttribute("onclick", "removeRow()");
var newb = b.cloneNode(true);
var el=document.getElementsByClassName("tabelcol");
for (var j=0; j<el.length; j++) {
newb.id = "butoaneD" + j;
el[j].appendChild(newb);
newb = b.cloneNode(true);
}
I haven't tested this..

Sscorpius
12-08-2012, 03:20 PM
Thank you so much, AndrewGSW. It works now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum