Using Jquery,I want to show the content on a element when a button is clicked.In each column there are buttons.When I click ,corresponding content should be displayed when I click on the button.
1.This is code block
<html>
<body>
<table>
<tr>
<td><div><button type="button" class="addButton">
Show
</table>
</body>
2.Scripting Code
<script type="text/javascript">
$(document).ready(function(){
$(".addButton").click(function(event){
var tdCount=$("#addInf.addInfo").length;
//length of the td elements
alert(tdCount);
for(var $i=0;$i<tdCount;$i++){
alert($i);
$(".addButton:eq(0)").hide();
// $(".addButton:eq($i)").hide();
//not able to hide for ith elements
}
});
});
My problem is first element is hidden.I want to dynamically show content of first column td and second columns td and so on //when a button is clicked and hide the button as well Iam able to do for one td element hide and show content.But how to do it dynamically
The context of the button click event handler is the button itself. In order to hide it you can simply do:
$(this).hide();
You can create a dynamic div inside each td/div and insert a class to all this dynamic divs.
Basically you need to use parent() and find() function inside the same div.
After that, only use the show()