Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

adding dynamic rows and formatting

Posted on 2006-11-28
7
1,012 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

837 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