/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] how to insert table in a div

Hi,

Please help me in seperating the below table in a div when clicked on a link.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<script language=”JavaScript”>
function showTable()
{
document.write(“<table border=”1″ cellspacing=”0″ cellpadding=”0″ width=”100&#37;” style=”background:#ccc”>”);
document.write(“<tr><td>”);
document.write(“<table>”);
document.write(“<tr><td><a href=”Product.html”>Product</a></td></tr>”);
document.write(“<tr><td><a href=”Search.html”>Search</a></td></tr>”);
document.write(“<tr><td><a href=”Order.html”>Order</a></td></tr>”);
document.write(“<tr><td><a href=”Help.html”>Help</a></td></tr>”);
document.write(“</table>”);
document.write(“</td></tr>”);
document.write(“</table>”);
}
</script>
</head>

<body>
<a href=”#” onclick=”showTable()”>showtable</a>
<div id=”insertTable”></div>

</body>
</html>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@FangDec 08.2009 — The link is running the script then firing it's default action, in this case reloading the document. [I]return false[/I] will prevent this.
&lt;a href="#" onclick="showTable(); return false;"&gt;showtable&lt;/a&gt;
Using [I]document.write[/I] after the document has loaded will create a new document. The original document no longer exists. Use innerHTML to insert the table. Nesting tables is unnecessary. Actually the content inserted is a list of links. Better would be to use <ul> and not <table>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;

&lt;script type="text/javascript"&gt;
function showTable()
{
var tb="&lt;table border="0" cellspacing="0" cellpadding="0" width="100&amp;#37;" style="background:#ccc;border:1px solid #000;"&gt;";
tb+="&lt;tr&gt;&lt;td&gt;&lt;a href="Product.html"&gt;Product&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
tb+="&lt;tr&gt;&lt;td&gt;&lt;a href="Search.html"&gt;Search&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
tb+="&lt;tr&gt;&lt;td&gt;&lt;a href="Order.html"&gt;Order&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
tb+="&lt;tr&gt;&lt;td&gt;&lt;a href="Help.html"&gt;Help&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
tb+="&lt;/table&gt;";
document.getElementById('insertTable').<a href="https://developer.mozilla.org/En/DOM:element.innerHTML">innerHTML</a>=tb;
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;a href="#" onclick="showTable(); return false;"&gt;showtable&lt;/a&gt;
&lt;div id="insertTable"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Escape characters when inserting: http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.4

A better method of inserting content is to use DOM methods rather than innerHTML, particularly when using xhtml.
Copy linkTweet thisAlerts:
@bas2k3authorDec 08.2009 — Thanks Fang !
×

Success!

Help @bas2k3 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 5.7,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...