选择特定表行时禁用按钮

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.

http://jsfiddle.net/XJVbD/

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.