add sub-rows mid table

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
LVL 1
scatheAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
<script type='text/javascript'>
  function addAfter( here ) {
    while ( here.nodeName != 'TR' ) {
      here = here.parentNode;
    }
    here.nextSibling.parentNode.insertBefore( here.cloneNode( true ), here );
  }
</script>
0
 
HonorGodSoftware EngineerCommented:
 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
 
HonorGodSoftware EngineerCommented:
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
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
scatheAuthor Commented:
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
 
HonorGodSoftware EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
wait a minute, you're right.  One moment please... ;-)
0
 
scatheAuthor Commented:
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
 
scatheAuthor Commented:
am adding this other issue as a seperate question
0
 
HonorGodSoftware EngineerCommented:
ok.  Glad to be of some help.  Thanks for the 'A'
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.