Table Row Hide jQuery


index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
var row = $(this).closest('tr');
var x = $(this);
var get_id = x.data('postid');
alert(get_id);
row.hide();
})
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>ROW</th>
<th>CoL</th>
<th>ACTION</th>
</tr>
<tr>
<td>Row-1</td>
<td>Col-1</td>
<td><a href="javascript:void(0)" data-postid="1">Delete</button></td>
</tr>
<tr>
<td>Row-2</td>
<td>Col-2</td>
<td><a href="javascript:void(0)" data-postid="2">Delete</a</td>
</tr>
<tr>
<td>Row-3</td>
<td>Col-3</td>
<td><a href="javascript:void(0)" data-postid="3">Delete</a></td>
</tr>
<tr>
<td>Row-4</td>
<td>Col-4</td>
<td><a href="javascript:void(0)" data-postid="4">Delete</a></td>
</tr>
<tr>
<td>Row-5</td>
<td>Col-5</td>
<td><a href="javascript:void(0)" data-postid="5">Delete</a></td>
</tr>
</table>
</body>

</html>
--------------------------
Demo - 1

Demo - 2

 Demo - 3


Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment