Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

add sub-rows mid table

Posted on 2006-11-27
9
Medium Priority
?
241 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…
Suggested Courses

916 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