CODEWITHSUNDEEP
jqueryhtmlhtml-table
van
van

Reputation: 9449

JQuery disable link in table row

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'/></A>
</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'/></A>
</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'/></A>
</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>

Upvotes: 1

Views: 4393

Answers (3)

Nick Craver
Nick Craver

Reputation: 630429

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 :)

Upvotes: 1

jAndy
jAndy

Reputation: 236022

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');
   }
});

Upvotes: 0

Mark Bell
Mark Bell

Reputation: 29745

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; });

Upvotes: 0

Related Questions