Solved

adding dynamic rows and formatting

Posted on 2006-11-28
7
1,007 Views
Last Modified: 2008-01-09

<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
0
Comment
Question by:scathe
7 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 250 total points
Comment Utility
<!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
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 250 total points
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 23

Expert Comment

by:rama_krishna580
Comment Utility
0
 
LVL 1

Author Comment

by:scathe
Comment Utility
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
 
LVL 1

Author Comment

by:scathe
Comment Utility
solved - the posted code helped me learn :)
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Good.  Thanks for the 'A', and good luck
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now