[Web-development (jquery)] Delete Row from Table by clicking it using jQuery

Delete Row from Table by clicking it using jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<h2>Delete Row using jQuery</h2> 
<style> 
#hor-minimalist-a 
{ 
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
	font-size: 12px; 
	background: #fff; 
	margin: 45px; 
	width: 480px; 
	border-collapse: collapse; 
	text-align: left; 
} 
#hor-minimalist-a th 
{ 
	font-size: 14px; 
	font-weight: normal; 
	color: #039; 
	padding: 10px 8px; 
	border-bottom: 2px solid #6678b1; 
} 
#hor-minimalist-a td 
{ 
	color: #669; 
	padding: 9px 8px 0px 8px; 
} 
#hor-minimalist-a tbody tr:hover td 
{ 
	color: #009; 

} 
</style> 
<table> 
 <thead> 
 <tr> 
 <th scope="col">Employee</th> 
 <th scope="col">Salary</th> 
 <th scope="col">Bonus</th> 
 <th scope="col">Supervisor</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>Stephen C. Cox</td> 
 <td>$300</td> 
 <td>$50</td> 
 <td>Bob</td> 
 </tr> 
 <tr> 
 <td>Josephin Tan</td> 
 <td>$150</td> 
 <td>-</td> 
 <td>Annie</td> 
 </tr> 
 <tr> 
 <td>Joyce Ming</td> 
 <td>$200</td> 
 <td>$35</td> 
 <td>Andy</td> 
 </tr> 
 <tr> 
 <td>James A. Pentel</td> 
 <td>$175</td> 
 <td>$25</td> 
 <td>Annie</td> 
 </tr> 
 </tbody> 
</table> 
<script> 
$(document).ready(function(){ 
	$("#hor-minimalist-a tr").hover(function(){ 
 $(this).css("background-color","#E8EDFF"); 
	}, function(){ 
 $(this).css("background-color","#FEFEFE"); 
	}) 
	$("#hor-minimalist-a tr").click(function(){ 
 $(this).css("background-color","#B9C9FE"); 
 $(this).fadeOut(400, function(){ 
 $(this).remove(); 
 }); 
	}); 

}); 
</script> 

source : http://tutorial101.blogspot.com, http://slideshare.net, http://stackoverflow.com

Posted by Unknown