Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

innerHTML!!!! 2

Status
Not open for further replies.
vbkris

vbkris

Programmer
Jan 20, 2003
5,994
0
0
IN
why doesnt this code work?
i am trying to add a row to the table...

<html>
<script>
function AddRow()
{
var oldvar=document.getElementById('tbl').innerHTML
newvar=oldvar+&quot;<tr><td>Hi</td></tr>&quot;;
document.getElementById('tbl').innerHTML=newvar
}
</script>
<body>
<table id=&quot;tbl&quot;>
<tr>
<td>
Hi
</td>
</tr>
</table>
<input type=&quot;button&quot; name=&quot;Add&quot; value=&quot;Add&quot; onclick=&quot;AddRow()&quot;>
</body>
</html>

Known is handfull, Unknown is worldfull
 
Sort by date Sort by votes
Hi vbkris
It doesn't work (I think) because the table tag doesn't support innerHTML. Use a span inside the table tags, as in
<html>
<script>
function AddRow()
{
var oldvar=document.getElementById('tbl').innerHTML
newvar=oldvar+&quot;<tr><td>Hi<\/td><\/tr>&quot;;
document.getElementById('tbl').innerHTML=newvar
}
</script>
<body>
<table>
<span id=&quot;tbl&quot;>
<tr>
<td>
Hi
</td>
</tr>
</span>
</table>
<input type=&quot;button&quot; name=&quot;Add&quot; value=&quot;Add&quot; onclick=&quot;AddRow()&quot;>
</body>
</html>

Note that I also used escape characters in the closing td and tr tags in the JS (in red). This is used to prevent JavaScript from &quot;thinking&quot; that you are trying to close the script tag.
Good luck and keep coding!

dolphyn

 
Upvote 0 Downvote
if you look at the innerHTML of the table at runtime, you'll see it's actually

<TBODY>
<TR>
<TD>Hi</TD></TR></TBODY>

i suggest using document.createElement(); and HTMLelement.appendChild();

function AddRow()
{
var tbl = document.getElementById('tbl');
var tbody = tbl.children[0];
var row = document.createElement(&quot;tr&quot;);
var cell = document.createElement(&quot;td&quot;);
cell.innerHTML = &quot;Hi&quot;;
row.appendChild(cell);
tbody.appendChild(row);
}



=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
Upvote 0 Downvote
both u guys are right.. it worked with <div> tag...
and it also gave
<TBODY>
<TR>
<TD>Hi</TD></TR></TBODY>
as jeff said.

can u guys give me a tutorial for innerHTML?


dolphyn:
i tried ur method but with </td> instead of <\/td> and it didnt work... what is the importance of <\/td>?

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
the reason for the \ in the above code is for escaping a character like / which would otherwise be interpreted before the text was written to the html stream. it's similar to using &gt; instead of > when you want to output a character which has a preceeding special meaning. :)
 
Upvote 0 Downvote
shadedecho can u tell me the importance of '/' i didnt get it... :(

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
faq216-3588 may be helpful to you.

You can also clone nodes to add rows...

<script>
rowNum = 1

function addRow(){
rowNum ++
oTable = document.getElementById(&quot;myTable&quot;)
newRow = document.createElement(&quot;tr&quot;)
newTD = document.createElement(&quot;td&quot;)
newText = document.createTextNode(&quot;row&quot; + rowNum)
newTD.appendChild(newText)
newRow.appendChild(newTD)
newRow.id = &quot;row&quot; + rowNum
oTable.firstChild.appendChild(newRow)
}

function cloneRow(){
rowNum ++
oTable = document.getElementById(&quot;myTable&quot;)
oRow = document.getElementById(&quot;row1&quot;)
newRow = oRow.cloneNode(true)
newRow.id = &quot;row&quot; + rowNum
oTable.firstChild.appendChild(newRow)
}

</script>
<table id=&quot;myTable&quot; border=1>
<tr id=&quot;row1&quot;><td>row 1</td></tr>
</table>

<input type=button onCLick=&quot;addRow()&quot; value=&quot;add row&quot;>
<br>
<input type=button onClick=&quot;cloneRow()&quot; value=&quot;clone row&quot;>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
 
Upvote 0 Downvote
vbkris,

the difference between '/' and '\/' is that in the second example, you're telling javascript that the forward slash is special by &quot;escaping&quot; it with a preceding backslash.

similar to \&quot; to make a quote within a quote:
var quote = &quot;&quot;\Four score and seven years ago...\&quot;&quot;;

i see it a lot when using document.write to write a <script> tag:

document.write('<script>var foo = &quot;bar&quot;;<\/script>');

the backslash escapes the forward slash, preventing the browser from interpreting the closing script tag until it should: when the write command executes.


=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
Upvote 0 Downvote
vbkris-
are you asking why you have a tag like </td> as opposed to just a <td>??

This is because in the HTML (not XHTML) standard, closing tags for any tag pair are done with a / preceeding the tag name.

hence, <html></html> <body></body> <table></table> etc etc
 
Upvote 0 Downvote
shadedecho
i knwe about / but didnt know u had to escape it in a strng...
:)

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
62
ggriffit
ggriffit
JRB-Bldr
  • Locked
  • Question
innerHTML onclick() functionality
Replies
2
Views
50
JRB-Bldr
JRB-Bldr
makamo66
  • Locked
  • Question
InnerHTML horizontal row problem
Replies
2
Views
43
makamo66
makamo66
hiyatran
  • Locked
  • Question
innerHTML Not Displaying
Replies
2
Views
26
vacunita
vacunita
larrydavid
  • Locked
  • Question
Link to External URL with innerHTML 1
Replies
3
Views
37
larrydavid
larrydavid

Part and Inventory Search

Sponsor

Back
Top