Jquery disable link in table row

Question

Hi,

My jquery is not working as expected:

I am trying to loop through each row then loop through each td and check if a td in a row contains the text 'test1' if so I need disable the link defined in a td with class "ms-vb-icon2" within the same row.

$("tr:has(td:contains('test1')) td.ms-vb-icon.a#click").click(function() { return false; });

http://jsfiddle.net/R8fuR/

My code is as below...

<table class='ms-listviewtable'>
<tr>
<td class='ms-vb2-icon'>
<A onclick='GoToLink(this);return false;' href='http://www.google.com' target='_self'><IMG alt='Edit' src='http://web-hub.net/wiki/skins/largepublisher/icon_edit_small.gif'/&gt;&lt;/A&gt;
</td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'>test1</td>
</tr>
<tr>
<td class='ms-vb2-icon'>
<A onclick='GoToLink(this);return false;' href='http://www.google.com' target='_self'><IMG alt='Edit' src='http://web-hub.net/wiki/skins/largepublisher/icon_edit_small.gif'/&gt;&lt;/A&gt;
</td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'>test2</td>
</tr>
<tr>
<td class='ms-vb2-icon'>
<A onclick='GoToLink(this);return false;' href='http://www.google.com' target='_self'><IMG alt='Edit' src='http://web-hub.net/wiki/skins/largepublisher/icon_edit_small.gif'/&gt;&lt;/A&gt;
</td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'></td>
<td class='ms-vb2'>test3</td>
</tr>
</table>

Answer 1

In your selector there is an extra dot between the td class and the anchor. Try:

$("tr:has(td:contains('test1')) td.ms-vb-icon a#click").click(function() { return false; });

Answer 2

should look like:

$('table.ms-listviewtable > tbody').find('td').each(function(){
   var $this = $(this);
   if(/test1/.test($this.text())){
      $this.siblings('.ms-vb-icon2').find('a')
         .unbind('click')
         .removeAttr('onclick')
         .attr('disabled', 'disabled');
   }
});

Answer 3

In this case remove the ., the #click and add the missing 2 to the vb2, like this:

$("tr:has(td:contains('test1')) td.ms-vb2-icon a").click(function() { return false; });

Or alternatively, remove the initial click handler, this seems to be more what you're after:

$("tr:has(td:contains('test1')) td.ms-vb2-icon a")
  .removeAttr('onclick').click(function() { return false; });

You can try out a demo here

You need to remove the already attached event handler because it'll happen before this new one, since it was attached first. The . comes out because it's not a class, it's a child element, and the #click comes out because we're not looking for an <a id="click">. I think what you intended here was a[onclick], the has-attribute selector, but since there's only one link there's no need for that here :)