Onclick event & JQuery – Transfer table rows into another table

We’ve already used the JQuery library for retrieving some data within a table row after a click event. Now we will fill a second table with the row clicked.

transfer_table_row_jquery

As the last example, following is the demo page :

table row_event fill table

At first you should download the library if you want to test your code, here I use jquery-2.1.1.js

which isn’t compatible with IE 8 and older.

 

Now you can add the following line to your page in order to load the library :

<script src="jquery-2.1.1.js" language="javascript"></script>

We also define a few simple styles to see things right :


table {
        border     : 1px solid gray;
	width      : 50%;
	text-align : center;
}

table#sourcetable tbody tr {
    background-color : #ffccff;
}

table#sourcetable tbody  tr {
    cursor : pointer;
}

 

You will see that when over a row, it will show a hand, this is achieved by the cursor : pointer parameter to each row.

Following is the code of our html page :


<h3>The source table</h3>

<table id="sourcetable">
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Url</th>
			<th>Country</th>
			<th>Item</th>						
		</tr>
	</thead>

	<tbody>
        <tr id="sour0">
		    <td>1</td>
		    <td>Name 1</td>
		    <td>url 1</td>
		    <td>Country 1</td>
		    <td>Item 1</td>
		</tr>
        <tr id="sour1">
		    <td>2</td>
		    <td>Name 2</td>
		    <td>url 2</td>
		    <td>Country 2</td>
		    <td>Item 2</td>
		</tr>
        <tr id="sour2">
		    <td>3</td>
		    <td>Name 3</td>
		    <td>url 3</td>
		    <td>Country 3</td>
		    <td>Item 3</td>
		</tr>
        <tr id="sour3">
		    <td>4</td>
		    <td>Name 4</td>
		    <td>url 4</td>
		    <td>Country 4</td>
		    <td>Item 4</td>
		</tr>
        <tr id="sour4">
		    <td>5</td>
		    <td>Name 5</td>
		    <td>url 5</td>
		    <td>Country 5</td>
		    <td>Item 5</td>
		</tr>		
    </tbody>
</table>


<h3>The second table :</h3>

<form method="POST" action="">
<table id="destinationtable">
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Url</th>
			<th>Country</th>
			<th>Item</th>						
		</tr>
	</thead>

	
	
</table>

</form>	

We’ve filled the source table with some items and also identify each row with an id so we can track that id for managing other clicks (one click adds the row, second click removes the row).

Now the code within the head tags :

var addedrows = new Array();

$(document).ready(function() {
    $( "#sourcetable tbody tr" ).on( "click", function( event ) {
  
    var ok = 0;
    var theid = $( this ).attr('id').replace("sour","");	

	var newaddedrows = new Array();
	
    for	(index = 0; index < addedrows.length; ++index) {

		// if already selected then remove
		if (addedrows[index] == theid) {
			   
			$( this ).css( "background-color", "#ffccff" );
			
			// remove from second table :
			var tr = $( "#dest" + theid );
            tr.css("background-color","#FF3700");
            tr.fadeOut(400, function(){
                tr.remove();
            });
			
	        //addedrows.splice(theid, 1);	
    		
			//the boolean
			ok = 1;
		} else {
		
		    newaddedrows.push(addedrows[index]);
		} 
    }   
    
	addedrows = newaddedrows;
	
	// if no match found then add the row :
	if (!ok) {
		// retrieve the id of the element to match the id of the new row :
		
		
		addedrows.push( theid);
		
		$( this ).css( "background-color", "#cacaca" );
				
     	$('#destinationtable tr:last').after('<tr id="dest' + theid + '"><td>' 
		                               + $(this).find("td").eq(0).html() + '</td><td>' 
		                               + $(this).find("td").eq(1).html() + '</td><td>' 
		                               + $(this).find("td").eq(2).html() + '</td><td>' 
		                               + $(this).find("td").eq(3).html() + '</td><td>' 
		                               + $(this).find("td").eq(4).html() + '</td></tr>');		  
		
	}

	
    });
});		

Each time a row is clicked, the details are loaded within the destination table and the row will be highlighted. If you click onto a different row, the row will be appended to the second table. But in the case a row is clicked another time, the background color will revert back to its original color and the corresponding row will be removed from the destination table. We keep track of the current clicked rows using the addedrows array object.

You may use the source of the demo page for all the source code.

I hope you enjoyed the short tutorial, there will be more very soon.

Downloads and informations :

http://jquery.com/

http://api.jquery.com/

 

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: