/    Sign up×
Community /Pin to ProfileBookmark

how to make rospan & colspan to this table

Copy linkTweet thisAlerts:
Jun 23.2005

i made this table but i wanna make colsoan and rowspan ,i don’t know how,also i wanna change width,bgcolor .

<html><head><script>
<!–

function table()
{
myBody=document.getElementsByTagName(“body”).item(0);
myTable=document.createElement(“table”);
tablebody=document.createElement(“tbody”);
for(i=0;i<3 ;i++)
{
row=document.createElement(“tr”);
for(j=0 ;j<4 ;j++)
{
col=document.createElement(“td”);
if (i==0&&j==0)
cell=document.createTextNode(“A”);
else if(i==0&&j==1)
cell=document.createTextNode(“B”);
else if (i==0&&j==2)
cell=document.createTextNode(“C”);
else if(i==0&&j==3)
cell=document.createTextNode(“D”);
else if(i==1&&j==0)
cell=document.createTextNode(“E”);
else if(i==1&&j==1)
cell=document.createTextNode(“F”);
else if(i==1&&j==2)
cell=document.createTextNode(“G”);
else if(i==1&&j==3)
cell=document.createTextNode(“H”);
else if(i==2&&j==0)
cell=document.createTextNode(“I”);
else if(i==2&&j==1)
cell=document.createTextNode(“J”);
else if(i==2&&j==2)
cell=document.createTextNode(“K”);
else if(i==2&&j==3)
cell=document.createTextNode(“L”);
col.appendChild(cell);
row.appendChild(col);

}

tablebody.appendChild(row);

}

myTable.appendChild(tablebody);
myBody.appendChild(myTable);
myTable.setAttribute(“border”,”1″)

}

//–>
</script>
</head>
<body onload=”table();”>
</body>
</html>

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJun 23.2005 — [i]element[/i].setAttribute('colSpan',3);

[i]element[/i].setAttribute('rowSpan',5);

[i]element[/i].setAttribute('bgColor','#CCFF00');

[i]element[/i].setAttribute('width','200');
Copy linkTweet thisAlerts:
@KorJun 23.2005 — for width, height, bgcolor and meny other attributes you may use also on-th-fly CSS

[i]element[/i].style.backgroundColor='#CCFF00';

[i]element[/i].style.width='200px';

But maybe it is wiser to have a CSS class and just append it

[i]element[/i].[color=red]className[/color] ='myclass';

======

edit : soryy mistyped... correction is now in red
Copy linkTweet thisAlerts:
@KorJun 23.2005 — also you may re-think your create statements in a more indexed way, something like:

var txt=[['A','B','C','D'],['E','F','G','H'],['I','J','K','L']]

for(var i=0;i<3 ;i++){

var row=document.createElement("tr");

for(var j=0 ;j<4 ;j++){

var col=document.createElement("td");

var t = document.createTextNode(txt[i][j]);

col.appendChild(t)

row.appendChild(col)

}

tablebody.appendChild(row)

}



Try using in functions local variables ([b]var[/b] myvariable=somevalue] instead of global, unless it is absolutely necesary
Copy linkTweet thisAlerts:
@mikey25authorJun 24.2005 — i tried ti use element.rowSpan but it has something wrong plz help.

<html><head><title>table </title><script>

<!--

function table()

{

myBody=document.getElementsByTagName("body").item(0);

myTable=document.createElement("table");

tablebody=document.createElement("tbody");

for(i=0;i<4 ;i++)

{

row=document.createElement("tr");

for(j=0 ;j<4 ;j++)

{

col=document.createElement("td");

if (i==0&&j==0)

{ cell=document.createTextNode("A");col.rowSpan=3;}

else if(i==0&&j==1)
cell=document.createTextNode("B");
else if (i==0&&j==2)
cell=document.createTextNode("C");
else if(i==0&&j==3)
cell=document.createTextNode("D");

if(i==1&&j==1)
{cell=document.createTextNode("E");col.rowSpan=2;}
else if(i==1&&j==3)
cell=document.createTextNode("F");

else if(i==2&&j==1)
{cell=document.createTextNode("G");col.colSpan=2;}

else if(i==2&&j==3)
cell=document.createTextNode("H");
else if(i==3&&j==0)
{cell=document.createTextNode("I");col.colSpan=2;}
else if(i==3&&j==2)
cell=document.createTextNode("J");
else if(i==3&&j==3)
cell=document.createTextNode("K");

col.appendChild(cell);

row.appendChild(col);


}

tablebody.appendChild(row);

}
myTable.appendChild(tablebody);

myBody.appendChild(myTable);

myTable.setAttribute("border","1")





}


//-->

</script>

</head>

<body onload="table();">

</body>

</html>
Copy linkTweet thisAlerts:
@mikey25authorJun 24.2005 — i tried to use element.rowSpan=2 but it has something wrong .plz help .

<html><head><title>table </title><script>

<!--

function table()

{

myBody=document.getElementsByTagName("body").item(0);

myTable=document.createElement("table");

tablebody=document.createElement("tbody");

for(i=0;i<4 ;i++)

{

row=document.createElement("tr");

for(j=0 ;j<4 ;j++)

{

col=document.createElement("td");

if (i==0&&j==0)

{ cell=document.createTextNode("A");col.rowSpan=3;}

else if(i==0&&j==1)
cell=document.createTextNode("B");
else if (i==0&&j==2)
cell=document.createTextNode("C");
else if(i==0&&j==3)
cell=document.createTextNode("D");

if(i==1&&j==1)
{cell=document.createTextNode("E");col.rowSpan=2;}
else if(i==1&&j==3)
cell=document.createTextNode("F");

else if(i==2&&j==1)
{cell=document.createTextNode("G");col.colSpan=2;}

else if(i==2&&j==3)
cell=document.createTextNode("H");
else if(i==3&&j==0)
{cell=document.createTextNode("I");col.colSpan=2;}
else if(i==3&&j==2)
cell=document.createTextNode("J");
else if(i==3&&j==3)
cell=document.createTextNode("K");

col.appendChild(cell);

row.appendChild(col);


}

tablebody.appendChild(row);

}
myTable.appendChild(tablebody);

myBody.appendChild(myTable);

myTable.setAttribute("border","1")





}


//-->

</script>

</head>

<body onload="table();">

</body>

</html>
Copy linkTweet thisAlerts:
@KorJun 27.2005 — 
element.rowSpan=2
[/quote]
I have advice you to use

element.setAttribute('rowSpan','2')

All the HTML attributes' values are [b]strings[/b], not numbers....
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 27.2005 — Your logic is horked. Your code sets colSpan to 2 but does not skip the next table cell. For rowSpan > 1 things get even more complicated. The following is sufficient for the colSpan problem:[CODE](...)

for(j=0 ;j<4 ;j++)

{

[color=green]cell = null[/color]

(...)

[color=green]if (cell)

{[/color]

col.appendChild(cell);

row.appendChild(col);

[color=green]}[/color]

(...)[/CODE]cell.colSpan and cell.rowSpan are fine, btw. There are very few occasions where you have to use setAttribute.
Copy linkTweet thisAlerts:
@KorJun 27.2005 — 
cell.rowSpan are fine, btw.
[/quote]
yes, DOM level1 is fine... I just have used the DOM2 notation... And I have pointed out that is better to set the values as strings... (maybe some browsers will get them if numbers as well, but it is safer to set that values as strings.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 27.2005 — If you mention the DOM you might as well read it:

interface HTMLTableCellElement : HTMLElement {

(...)

attribute [b]long[/b] colSpan;

attribute [b]long[/b] rowSpan;[/quote]
Copy linkTweet thisAlerts:
@KorJun 27.2005 — I did not want to intricate the code DOM Core Level 2 is most common now and it is enough. There is no need, by all means, to use DOM HTML....
×

Success!

Help @mikey25 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...