/    Sign up×
Community /Pin to ProfileBookmark

Open a <DIV> on the table row?

Copy linkTweet thisAlerts:
Feb 24.2008

I have a following table:

[CODE]
<table>
<tr><td onclick=”dosomething(this);”>Name1</td><td>Address1</td></tr>
<tr><td onclick=”dosomething(this);”>Name2</td><td>Address2</td></tr>
<tr><td onclick=”dosomething(this);”>Name3</td><td>Address3</td></tr>
<tr><td onclick=”dosomething(this);”>Name4</td><td>Address4</td></tr>
</table>

[/CODE]

I would like to open a DIV (which has many selection options) upon clicking a mouse and should show above selected row . DIV can be overlapped on the same row. Is it possible using createElement and appendElement?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ShampieFeb 24.2008 — What about changing innerHTML ?

<script>

function script(xid)

{document.getElementById(xid).innerHTML = Cheers world";}

</script>


<body>

<table width="357" height="146" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="126" bgcolor="#FF0000" id="pogo" onclick="script('pogo')">Hello world!</td>

<td width="231" bgcolor="#0000FF">&nbsp;</td>

</tr>

</table>

</body>


-OR-

change above script with:

<script>

function script(xid){

var ndiv = document.createElement('DIV');

ndiv.id = "bo";

sugar = document.getElementById(xid).appendChild(ndiv);

document.getElementById("bo").innerHTML = "<div style='color:"#0000FF";width:200px'>Cheers world!<div>";

}

</script>
Copy linkTweet thisAlerts:
@KorFeb 25.2008 — You can not write DIV's in a table outside the cells. You may create and append a new row, with a new created cell inside (colspan 2 in your case) with a new created DIV inside this cell.

Take care, rows are to be appended to the TBODY element. Even it is not HTML written whithin a TABLE, the TBODY exists anyway in javascript.
×

Success!

Help @codingisfun 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.2,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...