Member Avatar for rejisha

in my code i am listing some tables using <li>

and my code is

<ul id='test'>
<li><table1><tr><td></td></tr></table1></li>
<li><table2><tr><td></td></tr></table2></li>
<li><table3><tr><td></td></tr></table3></li>
</ul>

can i change the id of the <ul> when clicking on the <td> of the table???

very very thanx in advance...
:)

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by langsor
Member Avatar for essential

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Change Element Id</titles>
<style type="text/css">
<!--
/* This attribution will check if the id is changed! */
#change  { margin: 0; padding: 0; background-color: gold; }
#change a { color: bronze; text-decoration: none; font-weight: bold; }
-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
/* In this example i will change the ul tag current id value 'Test' and replace it to 'change'. Just change the specific id value of your choice. */
function changeId(tag, n, _id)
{ 
document.getElementsByTagName(tag)[n].id = _id;
document.getElementById('checknow').innerHTML = '<nobr>I\'ve got a new id ( ' + _id +' ) !</nobr>';
} 
// End of the Line and I'm DONE HIDING -->
</script>
</head>
<body>
<ul id='test'>
<li><table1><tr><td><a href="javascript:changeId('ul', 0, 'change');"><span id="checknow">Change My id</span></a></td></tr></table1></li>
<li><table2><tr><td><s</td></tr></table2></li>
<li><table3><tr><td></td></tr></table3></li>
</ul>
</body>
</html>
Member Avatar for langsor

Here's a couple ideas ... just for fun.

<html>
<head>
<style type="text/css">
#one,   #four { background: silver;}
#two,   #five { background: yellow;}
#three, #six  { background: limegreen; }
</style>
<script type="text/javascript">
change_id.remember;
function change_id ( target, id ) {
  if ( change_id.remember ) {
    change_id.remember.removeAttribute('id');
  }
  do {
    if ( target.nodeName.toUpperCase() == 'TABLE' ) {
      change_id.remember = target;
      target.id = id;
      break;
    }
  } while ( target && ( target = target.parentNode ) );
}
</script>
</head>
<body>
<ul id="test">
  <li><table><tr><td onclick="this.parentNode.parentNode.id='one'">one</td></tr></table></li>
  <li><table><tr><td onclick="this.parentNode.parentNode.id='two'">two</td></tr></table></li>
  <li><table><tr><td onclick="this.parentNode.parentNode.id='three'">three</td></tr></table></li>
</ul>

<ul id="test2">
  <li><table><tr><td onclick="change_id(this,'four')">four</td></tr></table></li>
  <li><table><tr><td onclick="change_id(this,'five')">five</td></tr></table></li>
  <li><table><tr><td onclick="change_id(this,'six')">six</td></tr></table></li>
</ul>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.