Category Archives: jQuery

Creating Dynamic table rows and colums in JQuery and removing it one by one.

Hi all…

Apart from Android, I am now going to post something in jquery.
In this post I will be showing how to create a dynamic table in jquery and adding data to it using objects and also deleting each row with a remove button in the corresponding row.

This is how it is done.

At first you have to dowload the jquery files. I will be sharing a download link at the end of this tutorial which will have my sample code with the jquery files.

So we will start

This is the HTML code that does the work.
After running this file we will get a screen like this.

Before adding the table rows.
Jquery Dynamic table creation

After adding 5 rows in the table
Jquery Dynamic table creation

After removing 2 rows from the table.
Jquery Dynamic table creation

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete Input box</title>
<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />
<script type="text/javascript" src="jquery/lib/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.autocomplete.js"></script>
<script>

  var itemCount = 0;
 
 $(document).ready(function(){
 
	var objs=[];
	var temp_objs=[];
	
	$( "#add_button" ).click(function() {	
		
		var html = "";
		
		var obj={
			"ROW_ID" : itemCount,
			"ITEM_NAME" :  $("#item_name").val(),
			"ITEM_PRICE" : $("#item_price").val(),
			"ITEM_QUANTITY" : $("#item_quantity").val()
		}   
	
		// add object
		objs.push(obj);
					
		itemCount++;
		// dynamically create rows in the table
		html = "<tr id='tr"+ itemCount + "'><td>"+ obj['ITEM_NAME'] + "</td> <td>" +  obj['ITEM_PRICE'] + " </td> <td>" +  obj['ITEM_QUANTITY'] + " </td><td><input type='button'  id='" + itemCount + "' value='remove'></td> </tr>";			
		
		//add to the table
		$("#bill_table").append(html)
		
		// The remove button click
		$("#"+itemCount).click(function() {
			var buttonId = $(this).attr("id");
			//write the logic for removing from the array
			$("#tr"+ buttonId).remove();			
		});
		
	});
	
 });
 
	
</script>
</head>
<body>
<table border='0' width='50%' align='center'  style="border-collapse:collapse " cellspacing='3' cellpadding='5'>
<th colspan="7" bgcolor="#0099FF">Billing</th>
<tr>

  	<td> Item Name : </td>
	<td><input name="item_name" type="text" id="item_name" size="20"/></td>
	
	<td> Price : </td>
	<td><input name="item_price" type="text" id="item_price" size="20"/></td>
	
	<td> Quantity : </td>
	<td><input name="item_quantity" type="text" id="item_quantity" size="20"/></td>
	
	<td><input name="add_button" type="button" id="add_button" size="20" value="Add" /></td>


</table>


<div id="billing_items_div"> 

<table border='1' id='bill_table'  width='50%' align='center'  style='border-collapse:collapse' cellspacing='3' cellpadding='5'>

</table>
</div>

</body>
</html>

You can download the complete source code from here.

How to find your Google Plus ID

This is so simple

1. Go to your Google + account (https://plus.google.com/).

2. Click on the Profile icon on the Left.

3. If you look at the URL in the address bar, it should look something like this:

https://plus.google.com/104653270154306099169/posts

4. The long numerical string in the URL is your Google+ ID. Here is CoderzHeaven’s from the URL above:

104653270154306099169/

Google + CoderzHeaven

jQuery Hide & Show Toggle – An Example

Hi,

Want to try out a simple hide and show toggle using jQuery? The example given below shows how you can simply hide and show a paragraph in html using jQuery. Try it out!

&lt;html&gt;
&lt;head&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

$(document).ready(function(){

  $(&quot;#hideMe&quot;).click(function(){
    $(&quot;p&quot;).hide();
  });

  $(&quot;#showMe&quot;).click(function(){
    $(&quot;p&quot;).show();
  });

});

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;Coderz Heaven! Click 'HideMe' for hiding! Click 'ShowMe' for showing&lt;/p&gt;
&lt;button id=&quot;hideMe&quot;&gt;HideMe&lt;/button&gt;
&lt;button id=&quot;showMe&quot;&gt;ShowMe&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

:)

jQuery dollar sign alternative

Hi,

Dollar ($) sign is a shortcut for jQuery. But sometimes it may have conflict with some other JavaScript library functions which also uses $ sign. What to do then?

Its simple. Use jQuery noConflict() method for creating any custom names. See for yourselves.





I am going to hide!

Here ‘jqNew’ is your custom name for $.

How to Disable Right Click on HTML page using jQuery ?

Hi,

In some special cases you may need to disable the Right Click option on HTML page you are using.
An easy way to do it using jQuery is follows. Use the following code in the HTML page where you want to disable Right Click.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

:)

Hide and Show a Text Using jQuery – Example

With jQuery manipulation of HTML & CSS can be done very easily.
Here we are going to show how to Hide a line of text using jQuery & Show it back also.
Let’s code speak first….


<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#hideButton").click(function(){
$("p").hide();
});

$("#showButton").click(function(){
$("p").show();
});
});
</script>

</head>
<body>

<p>Hey! Click 'Left', I will vanish! Click 'Right', I will be back!</p>

<button id="hideButton">Left</button>
<button id="showButton">Right</button>
</body>
</html>

Note : Download and put ‘jquery.js’ on your working folder before trying out!

What these code did?

Here we have one line text, html paragraph. Two buttons ‘Left’ & ‘RIght’ and whose id’s

are ‘hideButton’ & ‘showButton’ respectively.

jQuery code identifies which button we clicked using the button id’s mentioned above and

apply the hide() or show() function to the html paragraph p.

:)