RSS

Clone html table using jquery

19 Apr

Clone table content and set count value in attribute using jquery.

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*Global count to set the attribute id*/
var count= 1;

/*Clone row using the table name*/
function addCloneMappingRow(id){
   var table = document.getElementById( id );
   if ( table ) {
     var tbody = table.getElementsByTagName('tbody')[ 0 ];
     var numRows = tbody.rows.length;
     var lastRow = tbody.rows[ numRows - 1 ];
     var newRow = lastRow.cloneNode( true );
     var rowid='row' + numRows;
     newRow.setAttribute( 'id', 'row' + numRows );
     $(newRow).find('input, hidden, select, textarea, checkbox').each(function(){
      var currentNameAttr = $(this).attr('name'); 
      // get the current name attribute
      // construct a new name attribute using regular expressions
      // the match is divided into three groups (indicated by parentheses)
      // p1 will be 'v', p2 will be the number, p3 will be the remainder of the string
     var newNameAttr = currentNameAttr.replace(/([^\d]*)(\d*)([^\w]*)/, function(match, p1, p2, p3) {
        return p1+(count)+p3;
     });
     $(this).attr('name', newNameAttr); 
     if( newNameAttr.indexOf("id") !== -1){
       $(this).attr('value', ''); 
     }else{
     }
    });
    tbody.appendChild( newRow );
 }
 count++;
}

/*delete the row and not allow to remove last one*/
function deleteCloneMappingRow(row){
   if(count <= 1){
     alert("No Privilege to Remove");
     return false;
   }else{
     var parentNode=row.parentNode.parentNode.parentNode;
     $(parentNode).find('input, hidden, select, textarea, checkbox').each(function(){
     var currentNameAttr = $(this).attr('name'); // get the current name attribute
     if( currentNameAttr.indexOf("id") !== -1){
       var val = $(this).attr('value');
       if (val) {
         var deletingrowval = $('#deletingRows').val();
         $('#deletingRows').val(deletingrowval+","+val);
       }
     }
   });
   var delRow=row.parentNode.parentNode.parentNode.rowIndex;
   document.getElementById('cloneTable').deleteRow(delRow);
   count--;
  }
 }
</script>
</head>
<body>
<table id="cloneTable">
 <tr id="row0">
 <td><input type='text' id='name' name='name'></td>
 <td><input type='text' id='id' name='id'></td>
 <td><input type='text' id='last' name='last'></td>
 <td><textarea id='address' name='address' cols='20' rows='3'></textarea></td>
 <td><a href="#" onclick="addCloneMappingRow('cloneTable')" >Add</a></td>
 <td><a href="#" onclick="deleteCloneMappingRow(this)" >Delete</a></td>
 </tr>
</table>
</body>
</html>
 
Leave a comment

Posted by on April 19, 2013 in General, Javascript, jquery

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: