How to change the css style and link of a previous table cell based on current cell value in jQuery

Question

I have a table structure in SharePoint which means I have no control over the rendered HTML in that compiled webpart so I am wanting to use jQuery to assist with styling. I can wrap the webpart in a div to provide a unique ID for targeting in jQuery

For any table data entry that has a value of 0 I want its label to be greyed out and its link none clickable.

Example HTML is

<div id="uniqueID">
<table>
  <tr>
    <td><a href="url">Label 1</a></td>
    <td>12</td>
    <td><a href="url">Label 2</a></td>
    <td>0</td>
    <td><a href="url">Label 3</a></td>
    <td>2</td>
  </tr>
</table>
</div>

While I understand that I need to investigate the value of every second column and then act on the previous column, the process of doing this in JQuery has stumped me.

Thanks

Answer 1

You could use this piece of code, making use of prev() to find previous sibling cell, and removeAttr() to remove the link from the label:

$('#uniqueID td').each(function () {
    if ($(this).text().trim() == "0") {
        $(this).prev().find('a').removeAttr('href').css({color: 'grey'});
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="uniqueID">
<table>
  <tr>
    <td><a href="url">Label 1</a></td>
    <td>12</td>
    <td><a href="url">Label 2</a></td>
    <td>0</td>
    <td><a href="url">Label 3</a></td>
    <td>2</td>
  </tr>
</table>
</div>

Chaining is safe

There is no need to add a check whether there really is a previous cell or a link in it, as jQuery will just do nothing in that case (the jQuery objects are empty arrays in that case).

Removing the href attribute

In this solution the link is made non-clickable by just removing the href attribute, as apparently it serves no purpose, it is better to get rid of it.

Also realise that without removing the href attribute -- even when disabling some mouse pointer events -- the URL is still enabled and the user can still follow it via several methods:

• the link can get focus (e.g. via tab key), and once it has focus, there are several ways of activating the link:

  • With the enter key;
  • With the context menu key (often next to right Ctrl key): the link can be opened via that popup menu;
  • Several ways exist with other input devices (e.g. TV controls)

• Browser plug-ins may help the user with using links in some way;

• Scripts loaded with the page might also use the link in some way....

These are the methods that come to mind, but there might be more.

Because the link is actually there, is might be misleading also for those using screen readers) or other accessibility tools.

See also this question.

Ignoring white-space

The trim() call makes sure that the zero is also recognised even when there is white space around it.

Answer 2

You can try something like this:

$('#uniqueID>table td').each(function(){
    var self = $(this),
        hasLink = (self.children('a').length > 0);

  if (!hasLink && parseInt(self.text()) === 0){
    self.prev().addClass('grayedOut');
  }
});

and css class for grayed out state:

.grayedOut{
  color: #555;
  background-color: #aaa;
  pointer-events: none;
}

jsfiddle: https://jsfiddle.net/y6fb8Lb6/

To explain: Iterate through every td element and determine whether the value equals to zero. Just for case - also check if it doesn't contain the link. If this condition is fullfilled let's apply a given css class to previous td element. This css class apart of coloring also applies the pointer-events: none; which will make the link not clicable.

Answer 3

You can try this

<script>
$(document).ready(function() {
    $('td').each(function(){
        if($(this).has('a').length === 0){
            if($(this).html() == '0'){
                alert($(this).prev().html());
                $(this).prev().find('a').css('color','#000');
                $(this).prev().find('a').click(function(e){
                    e.preventDefault();
                });
            }
        }
    })
});
</script>