Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

add sub-rows mid table

Posted on 2006-11-27
9
Medium Priority
?
239 Views
Last Modified: 2008-03-03
i have this code

function addR(){
var allRows = document.getElementById(''upltab'').getElementsByTagName(''tr'');
var lastRow = allRows[allRows.length-1];
var root = lastRow.parentNode;
var newRow = root.appendChild(lastRow.cloneNode(true));
}

which will add a new row in the "upltab" table when called from an onClick event in a button.

what i want to do is also allow for subrows - so i need another function that will receive information on WHICH row was selected based on a link in the row itself and will add a subrow under just that main row rather than at the end of the table.

cheers
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
  • 6
  • 3
9 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 18018952
 It depends on your preference.  If you have a link, or a button within the row, then it could call/invoke a function (using something like "addAfter(this)").
  This function can go up the parent chain, to locate the TR element, then appendChild() after it.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18018980
For example:
--------------------
<!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 addAfter( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    here.parentNode.appendChild( here.cloneNode( true ) );
  }
</script>

</head>
<body>

<table border='1'>
  <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 1

Author Comment

by:scathe
ID: 18019335
thanks for that - it works ok and it does copy the whole row into a subrow, which is what i want  but its puts it at the END of the table. Any way to insert rows between rows already there ?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 41

Expert Comment

by:HonorGod
ID: 18021186
It adds a row after the current row.
Test it with this table:


<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>
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18021204
wait a minute, you're right.  One moment please... ;-)
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 18021265
<script type='text/javascript'>
  function addAfter( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    here.nextSibling.parentNode.insertBefore( here.cloneNode( true ), here );
  }
</script>
0
 
LVL 1

Author Comment

by:scathe
ID: 18026060
thats great, just what i needed. Is there an easy way to change this clone row slightly though ?  i.e. at the moment i get a clone but how can i apply new CSS to it to make it look different ?  if you can help great, but you certainly answered my original question.

thanks again
0
 
LVL 1

Author Comment

by:scathe
ID: 18026316
am adding this other issue as a seperate question
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 18028020
ok.  Glad to be of some help.  Thanks for the 'A'
0

Featured Post

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!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

730 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