?
Solved

adding dynamic rows and formatting

Posted on 2006-11-28
7
Medium Priority
?
1,018 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
[X]
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
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 1000 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 1000 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

770 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