adding dynamic rows and formatting


<script type='text/javascript'>
  function addAfter( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    here.nextSibling.parentNode.insertBefore( here.cloneNode( true ), here );
  }
</script>
 
I have this piece of code that creates a new subrow from a link in a table row. I want to be able to alter this subrow to show up visibily different - but as it is just cloning the current row , how do i get it to use its own CSS?
 
Also, I just noticed that this code will not add a new subrow to the last row i.e. it has to be in between 2 rows to work - how to fix that ?

heres some table code it works with

<table>
<tr><td><a href="javascript:;" onclick="addAfter(this);"> + sub </a></td><td><input value=test1></td></tr>
<tr><td><a href="javascript:;" onclick="addAfter(this);"> + sub </a></td><td><input value=test2></td></tr>
</table>

thanks all
LVL 1
scatheAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Add After </title>
<script type='text/javascript'>
  function hilite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass ) {
        klass += ' hilite';
      } else {
        klass = 'hilite';
      }
      tds[ i ].setAttribute( 'class', klass );
    }
  }

  function lolite( row ) {
    var tds = row.getElementsByTagName( 'td' );
    for ( var i = 0; i < tds.length; ++i ) {
      var klass = tds[ i ].getAttribute( 'class' );
      if ( klass && ( klass.search( /\bhilite\b/ ) > -1 ) ) {
        klass = klass.replace( /\bhilite\b/, '' );
        tds[ i ].setAttribute( 'class', klass );
      }
    }
  }

  function addAfter( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    here.nextSibling.parentNode.insertBefore( here.cloneNode( true ), here );
    lolite( here.parentNode );
    hilite( here );
  }
</script>
<style type='text/css'>
  .hilite { background-color : yellow; }
</style>
</head>
<body>

<table border='1'>

  <tr>
    <td>uno</td>
    <td>dos</td>
    <td>tres</td>
    <td>quatro</td>
    <td>...</td>
    <td><input type='button' value='Add a Row' onclick='addAfter(this)' />
    </td>
  </tr>

  <tr>
    <td>Now</td>
    <td>is</td>
    <td>the</td>
    <td>time</td>
    <td>...</td>
    <td><input type='button' value='Add a Row' onclick='addAfter(this)' />
    </td>
  </tr>
</table>

</body>
</html>
0
 
HonorGodSoftware EngineerCommented:
Once the new row is in place, you can process the elements (i.e., the TD entries) and use the setAttribute method to add a class value.
0
 
ZvonkoConnect With a Mentor Systems architectCommented:
Check this:


<script type='text/javascript'>
  function addAfter( here ) {
    while ( here && here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    if(here){
      var newRow = here.cloneNode( true );
      newRow.className = "yourClass";
      here.nextSibling.parentNode.insertBefore( newRow, here );
    }
  }
</script>


0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
rama_krishna580Commented:
0
 
scatheAuthor Commented:
hi all  

honorgod: your code does add style to the subrow - but it loses that style next time a subrow is created

zonko: your style stays forever but it styles the master row not the subrow

rama: i had a quick look but i dont want to start again from scratch when i feel im nearly there with the current code


thanks
0
 
scatheAuthor Commented:
solved - the posted code helped me learn :)
0
 
HonorGodSoftware EngineerCommented:
Good.  Thanks for the 'A', and good luck
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.