JSFiddle - React, Tailwind, and code Playground

by shruti patil

HTML

<div id="links">
  <table class="c-table">
    <thead>
      <tr>
        <th colspan="2">Sales Metrics</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class = "tagid"><a id = "anchor">Volume Growth (MoM)</a></td>
        <td><span id="salesVolumeGrowthMoM"></span></td>
      </tr>
      
      

    </tbody>
  </table>
</div>
<button class="button" ng-class="{'active': isActive}" ng-click="active()" type="button">Trends</button>

CSS

.isDisabled {
  color: black;
  cursor: none;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}
.isEnabled {
  color: blue;
  cursor: none;
  
  text-decoration: underline;
  pointer-events: none;
}

JavaScript

var count =0;

/* $.fn.replaceUrl = function() {
var regexp = /(\w+\s+\w+)/gi;
//var regexp = /(\w+\s)/gi;
 // var regexp = /((\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  this.each(function() {
    $(this).html(
      $(this).html().replace(regexp, '<a id="anchor" href="$1">$1</a>')
    );
  });
  return $(this);
}
 */


 $('button').on('click',function() {

 count++;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
     document.getElementById("anchor").setAttribute("href","#");
 //   $('.tagid').removeClass("isDisabled");
    
    
          //$('.tagid').replaceUrl();
    }
    // on even clicks do this
    else if (isEven(count) === true) {
    document.getElementById("anchor").removeAttribute("href");
   //$('.tagid').removeAttr('href');
   // $('.tagid').addClass("isDisabled");
    }
 

 
 });