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...
:)

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>

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>
This article has been dead for over six months. Start a new discussion instead.