insert html code to createelement(" td")

130 New Member

hello all
i did this table useing
createElement() ;
i am trying to insert html code to the <td> to put img and links
but so far no luck
any one have an idea on how it shouled b done?
the second qustion is how i can desing the hieght of the td
here is snippet

Expand|Select|Wrap|Line Numbers

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

var cellText = document.createTextNode(only text ids display, no innerHTML?); 

cell.setAttribute("aligen","center");        //dosent work         

cell.appendChild(cellText);

row.appendChild(cell);

also my last qustion is how can i see the code that been generate?
i see that the table is there but i cant see the html codeof it soi cant copy paste it

thanks guys

Oct 28 '07 #1

Subscribe Reply

19310

Ferris

101

New Member

Hi

I tested your code,and I think the problem is you missed quote mark in your code,and you spell wrong.

change
var cellText = document.create TextNode(only text ids display, no innerHTML?);
into
var cellText = document.create TextNode("only text ids display, no innerHTML?");

change
cell.setAttribu te("aligen","ce nter");
into
cell.setAttribu te("align","cen ter");

then,you'll see the text in your table.

here is my test code:
[HTML]
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">

</tr>
</table>
</body>
</html>

<script language="javas cript">
var row = document.getEle mentById("tr1") ;
var cell = document.create Element("td");
var cellText = document.create TextNode("only text ids display, no innerHTML?");
cell.setAttribu te("align","cen ter"); //now works
cell.appendChil d(cellText);
row.appendChild (cell);
</script>

[/HTML]

for your 2th question:

since your table is created by javascript(DOM) ,you table is a part of javascript code in your HTML code. you can't find the HTML code after the table is created. You can using DOM Inspector in Firefox,or IE Develop Toolbar in IE to check your table was created successfully,or not.

hope it helps.

Oct 28 '07 #2

Amzul

130

New Member

Hi

I tested your code,and I think the problem is you missed quote mark in your code,and you spell wrong.

change
var cellText = document.create TextNode(only text ids display, no innerHTML?);
into
var cellText = document.create TextNode("only text ids display, no innerHTML?");

change
cell.setAttribu te("aligen","ce nter");
into
cell.setAttribu te("align","cen ter");

then,you'll see the text in your table.

here is my test code:
[HTML]
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">

</tr>
</table>
</body>
</html>

<script language="javas cript">
var row = document.getEle mentById("tr1") ;
var cell = document.create Element("td");
var cellText = document.create TextNode("only text ids display, no innerHTML?");
cell.setAttribu te("align","cen ter"); //now works
cell.appendChil d(cellText);
row.appendChild (cell);
</script>

[/HTML]

for your 2th question:

since your table is created by javascript(DOM) ,you table is a part of javascript code in your HTML code. you can't find the HTML code after the table is created. You can using DOM Inspector in Firefox,or IE Develop Toolbar in IE to check your table was created successfully,or not.

hope it helps.

thanks man, you were right about my bad spelling :/

but for the first qustion i think i havent explain myself good.
i know i need to put ""in the () but i want to use html code
like that :

Expand|Select|Wrap|Line Numbers

 var code="<a href=\"www.thescripts.com\">the scipts</a>"

var cellText = document.createTextNode(code); // i want to put the link (code) in the <td>

about the 3 Qustion,
is there a way to take the all code and insert it to a var and not just for <tag>
i need to display the code as well not just the table

hope u can understand me

Oct 28 '07 #3

Ferris

101

New Member

Hi:

Oh,I see. you want to insert HTML code into <td> HTML is not a textNode,so you can't insert it using createTextNode. but , you can do it like this:

Expand|Select|Wrap|Line Numbers

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

    var code = "<a href=\"www.thescripts.com\">the scipts</a>";

    cell.setAttribute("align","center"); 

    cell.innerHTML = code;

    row.appendChild(cell);

for your 3rd question,of cause you can insert all your code to a var. look at these code:

Expand|Select|Wrap|Line Numbers

 
    var code= "<a href=\"http://www.thescripts.com\">the scipts</a>";

    document.write(code);

also,you can use innerHTML to insert your code.

Expand|Select|Wrap|Line Numbers

 
    var code= "<a href=\"http://www.thescripts.com\">the scipts</a>";

    document.getElementsByTagName("body")[0].innerHTML = code;

am I clear?

hope it helps.

Oct 28 '07 #4

Amzul

130

New Member

Hi:

Oh,I see. you want to insert HTML code into <td> HTML is not a textNode,so you can't insert it using createTextNode. but , you can do it like this:

Expand|Select|Wrap|Line Numbers

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

    var code = "<a href=\"www.thescripts.com\">the scipts</a>";

    cell.setAttribute("align","center");

    cell.innerHTML = code;

    row.appendChild(cell);

for your 3rd question,of cause you can insert all your code to a var. look at these code:

Expand|Select|Wrap|Line Numbers

    var code= "<a href=\"http://www.thescripts.com\">the scipts</a>";

    document.write(code);

also,you can use innerHTML to insert your code.

Expand|Select|Wrap|Line Numbers

    var code= "<a href=\"http://www.thescripts.com\">the scipts</a>";

    document.getElementsByTagName("body")[0].innerHTML = code;

am I clear?

hope it helps.

thanks. that help me alot
i am 90% from my goal.
but agian please explian how to insret the code that DOM generated to a var...
i not only need to show the table that DOM creted i alsoneed to show the code of it
is that posible?
i know i can do it all in inerrHTML but its not elegent and i woued have to write itall agian :\

Oct 28 '07 #5

acoder

16,027

Recognized Expert Moderator MVP

i not only need to show the table that DOM creted i alsoneed to show the code of it

You mean display it on the screen?

Oct 29 '07 #6

Amzul

130

New Member

You mean display it on the screen?

i ment that i need to display the code that the DOM create

i mange to do so like this

Expand|Select|Wrap|Line Numbers

 //asumming that tblis the highr level of the tabl (father)

generated_code=tbl.innerHTML;

now i can put it anyware i want (in a <pre> <div> etc...)

Oct 29 '07 #7

Similar topics

3825

document.getElementById("image1") has no properties

by: rkhurana | last post by:

Hi I am writing a JSF application that uses some third party charts. While I can see the chart but the javascript that is supposed to calla function to update chart periodically has a problem. It reports the error in the console - "document.getElementById("image1") has no properties". Pls advice. thanks rupak <?xml version="1.0" encoding="UTF-8"?> <jsp:root version="1.2" ...> ...

Javascript

723

What is the difference between a "A" and "TD A" definition ?

by: Marcus Otmarsen | last post by:

In my CSS stylesheet I can define e.g. A { FONT-WEIGHT: bold; FONT-SIZE: 16px; } and TD A { FONT-WEIGHT: bold; FONT-SIZE: 12px; } What is the difference for a HTML code like

HTML / CSS

2182

How to get the "TDs" of a specific table??

by: querry | last post by:

Hi all, I am trying to change the background color of individual Table Cells using the javascript as follows. function changecolor(e) { var etarg; if (!ee) var ee = window.event; if (ee.target) etarg = ee.target; else if (ee.srcElement) etarg = ee.srcElement;

Javascript

6459

hi, <div style="visibility:hidden" id="hid"> is not working in table

by: msg2ajay | last post by:

hi, i am working on <div> i have to hide some part of the table. I am not able to hide that table part can anybady tell me where is the error. <html> <head> <script type="text/javascript"> function callme(){ document.getElementById("hid").style.visibility="visible"; }

Javascript

3211

The "and" operator not validating

by: zaidalin79 | last post by:

I am in a JavaScript class, and we have to get all of our code to validate at the w3c website... Here is my code, it does what I want it to do which is require the user to enter the name and either the address of the email address, but when I try to validate it through w3c, I get the following errors... Can anyone help? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...

Javascript

7656

The BEST "FREE" Pure ASP 10MB File Upload

by: hotflash | last post by:

Hi All, I found the best pure ASP code to upload a file to either server and/or MS Access Database. It works fine for me however, there is one thing that I don't like and have tried to fix but don't have any luck is to do a form validation. This script requires the files: db-file-to-disk.asp and _upload.asp. There is a DESCRIPTION field in the db-file-to-disk.asp file, what I want to do is the user has to field out this fied before...

ASP / Active Server Pages

4315

Element "GESCHLECHT" is undefined in FORM.

by: blackrunner | last post by:

ERROR in my Query?! ERROR: Element GESCHLECHT is undefined in FORM. i think everything ok. Maby somebody can help me here Element GESCHLECHT is undefined in FORM. The error occurred in \anmeldung2.cfm: line 404

ColdFusion

3912

$("td").click(function() { $(this).empty(); } will work for table in html but not php

by: thatcollegeguy | last post by:

http://smarterfootball.com/exits/theHTML.html I am not sure what is wrong w/ this code. The main issue is that the table that is in the initial html will empty its td but the table that I load using php and jquery through a mysql database will not empty the td elements. There is a table underneath the button in the initial html. if you click on a box in the table, it will empty. the same does not happen for the table that is generated by...

Javascript

1077

How do i make an "onChange" event to register in internet explorer?

by: Akpo | last post by:

Hi all, i am writing an ajax and php application for a sec ondary school, and i want the contents of one select list to be based on the values of the select list that appears before it. The issue is that the onChange event that fires the function that sends the ajax request to populate the second select list does not have any effect when i am using internet explorer. Please help me fix this. I have enclosed my code below. Tanx. This is the...

Javascript

10603

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10356

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10099

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9176

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7643

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5675

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4314

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3836

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3003

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General