Solved

adding dynamic rows and formatting

Posted on 2006-11-28
7
1,010 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
ID: 18028042
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
ID: 18028338
<!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
ID: 18030763
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
Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18031004
0
 
LVL 1

Author Comment

by:scathe
ID: 18035239
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
ID: 18123620
solved - the posted code helped me learn :)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18124837
Good.  Thanks for the 'A', and good luck
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 49
Getting selected value of a dropdown with jquery 7 38
JQuery JavaScripot loop though RadioButtonList 4 25
Else condition 9 19
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

777 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