Welcome to WebmasterWorld Guest from 23.20.54.196

Forum Moderators: open

Message Too Old, No Replies

Adding tr, DOM or display:none ?

     
9:58 pm on Mar 12, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 4, 2006
posts:85
votes: 0


I want to add a tr with inputs after a tr with inputs, based on those inputs. Is it better to add the tr and inputs with Javascript or would it be better to just display:none until it's needed?

I have a onchange event calling a function that I'm trying to build that will make the needed row and inputs. Is there a way to return to the function what tow the input is in, like with the 'this' keyword?

4:44 am on Mar 13, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 14, 2008
posts:144
votes: 0


You are suggesting that the rows are already filled out with input tags, and that some rows are hidden and some are not. You want to reveal certain rows, and not others, based on which input is being used, or what is being entered there? That means you are examining the control with every keypress. Or is that your use of the, onchange? Paste the code that you are using. As for the context word, this, you could work out to the first TR, and get its id, or assume next-sibling, or however you imagine it. But as you are already polling the control, basically, you know its id. You could put together an object, a table, for various input tag ids and what row they are in, if row is important.
1:39 am on Mar 14, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 4, 2008
posts: 210
votes: 0


This works nicely with carriage return after entering/changing data in the first input, but it doesn't work well if tab is used.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = UTF-8'>
<style>
*.hide{visibility:hidden}
*.show{visibility:visible}
</style>
</head><body>
<table>
<tr id='tr1'><td><input id='in11' class='show' value='val1' onchange="(x=document.getElementById('in21')).className='show';x.focus()"></td></tr>
<tr id='tr2'><td><input id='in21' class='hide' value=''></td></tr>
</table>
</body></html>