Blog Archive

jQuery manipulate Table using detach() and append() methods

jQuery is simple and very powerful. This example demonstrate the power of two jQuery methods detach() and append() to manipulate HTML table rows and its elements. detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time. In this example we start with two HTML tables one that has data and another one is empty. When you click on the button it detaches the Row from the top Table and appends it to the bottom Table. You can use the prepend() method also to add them as the first row in the bottom table.


jquery manipulate HTML table detach append

HTML source code for the application - index.html

<html>
<head>
<title>jQuery manipulate Table using detach() and append()</title>

<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript">
</script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript">
</script>
<script type="text/javascript" src="app.js"></script>

<style type="text/css">
table {
 border: 1px black solid;
 border-collapse: collapse;
}

th {
 background-color: #8b8b83;
 color: white;
 text-align: left;
 padding-left: 10px;
}

tr {
 background-color: white;
 margin: 1px;
}

.shaded {
 background-color: #eeeee0;
}

td {
 padding-left: 10px;
 text-align: left;
}
</style>
</head>
<body>
 <p>Top Table</p>
 <table id="top">
  <tbody>
   <tr>
    <th>&nbsp;</th>
    <th>Country Code</th>
    <th>Country Name</th>
    <th>Continent</th>
    <th>Region</th>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ABW</td>
    <td>Aruba</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>AFG</td>
    <td>Afghanistan</td>
    <td>Asia</td>
    <td>Southern and Central Asia</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>AGO</td>
    <td>Angola</td>
    <td>Africa</td>
    <td>Central Africa</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>AIA</td>
    <td>Anguilla</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ALB</td>
    <td>Albania</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>AND</td>
    <td>Andorra</td>
    <td>Europe</td>
    <td>Southern Europe</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ANT</td>
    <td>Netherlands Antilles</td>
    <td>North America</td>
    <td>Caribbean</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ARE</td>
    <td>United Arab Emirates</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ARG</td>
    <td>Argentina</td>
    <td>South America</td>
    <td>South America</td>
   </tr>
   <tr>
    <td>
    <input type="button">
    </td>
    <td>ARM</td>
    <td>Armenia</td>
    <td>Asia</td>
    <td>Middle East</td>
   </tr>
  </tbody>
 </table>
 <p>Bottom Table</p>
 <table id="bottom">
  <tbody>
   <tr>
    <th>&nbsp;</th>
    <th>Country Code</th>
    <th>Country Name</th>
    <th>Continent</th>
    <th>Region</th>
   </tr>
  </tbody>
 </table>
</body>
</html>

jQuery source code for the application - app.js

$(document).ready(function() {
 
 $('#top').find(":button").each(function(){
  $(this).prop('value','SELECT');
   });
 
 $(":button").click(function(event){
  if($(this).prop('value') == "SELECT"){
   $(this).prop('value','REMOVE');
   var myObject = $(this).parent().parent().detach();
   $('#bottom').append(myObject);
  }
  else {
   $(this).prop('value','SELECT');
   var myObject = $(this).parent().parent().detach();
   $('#top').append(myObject);
  }
 });
 
});