Solved

add sub-rows mid table

Posted on 2006-11-27
9
229 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now