Solved

add sub-rows mid table

Posted on 2006-11-27
9
236 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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 500 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

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-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

622 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