Dynamically Duplicating Table Row

**kathycam** · 02-17-2012, 02:54 PM

Hi

I have create a table with 1 row and when the user clicks the "Add Row" button, the row is added to the bottom of the table.

I just can't figure out how to do it.

Attached attempt at coding it

Thank you.

**vwphillips** · 02-17-2012, 03:35 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function AddRow(obj){
 var tr,tbdy;
 while (obj.parentNode&&!tr){
  if (obj.nodeName.toUpperCase()=='TR'){
   break;
  }
  obj=obj.parentNode;
 }
 obj.parentNode.appendChild(obj.cloneNode(true));
}

</script>

</head>

<body>
<table border="1">
  <tbody>
   <tr>
    <td><input type="button" name="" value="New Row" onmouseup="AddRow(this);"/></td>
   </tr>
  </tbody>
</table>


</body>

</html>

Thread: Dynamically Duplicating Table Row

Thread Tools

Search Thread

Dynamically Duplicating Table Row

Bookmarks

Bookmarks

Posting Permissions