I want to disable a particular row button and not all the buttons. I tried using id
but it only hide the very first row button. Any help would be nice.
php:
$rowID=1;
while($row = oci_fetch_array($query))
{
echo '<tr>
<td>
<a href="#" rel='.$rowID.' id="buttonq" class="button green ValueDisplay">
<div class="icon" style="margin-left: 5px; margin-top: 5px;">
<span class="ico-edit"></span>
</div>
</a>
</td>
</tr>';
$rowID++;
}
js:
<script>
$('.ValueDisplay').click(function()
{
var getid = this.rel;
$('#buttonq').css('visibility', 'hidden');
//document.getElementById('buttonq'+getid+'').style.visibility="hidden";
});
</script>
As per my comment: You are hiding the clicked element, so just use:
$('.ValueDisplay').click(function(ev)
{
ev.preventDefault();
//show all buttons
$('.ValueDisplay').show();
// hide this one
$(this).hide();
});
You may as well remove the id, as it is not valid to have duplicate id's and it does not seem to serve a purpose:
<td>
<a href="#" class="button green ValueDisplay">
<div class="icon" style="margin-left: 5px; margin-top: 5px;">
<span class="ico-edit"></span>
</div>
</a>
</td>
Unless you need the id
for something else, you can simply toggle the state of a specific row based on which link was clicked.
PHP
while($row = oci_fetch_array($query))
{
echo '<tr>
<td>
<a href="#" class="button green ValueDisplay">
<span class="icon" style="display: block; margin-left: 5px; margin-top: 5px;">
<span class="ico-edit"></span>
</span>
</a>
</td>
</tr>';
}
jQuery
$('.ValueDisplay').on('click', 'a', function(e) {
e.preventDefault();
$(this).closest('td').prop('disabled', 'disabled').hide();
});
I wasn't entirely clear on whether you're hiding or just disabling. Let me know if the code above isn't what you're after.
Notes:
The user is clicking a link element, so to prevent the page from refreshing, use e.preventDefault()
in the event handler.
You have a <div>
element inside an <a>
anchor element, which likely won't validate if that matters to you.