JSFiddle - React, Tailwind, and code Playground

by juzerali

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Compare</title>
<style type="text/css">

</style>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
  <colgroup>
  <col class="col-1" />
  <col class="col-2 highlight"/>
  <col class="col-3 highlight" />
  <col class="col-4 highlight" />
  <col class="col-5" />
  </colgroup>
  <tr>
    <th scope="col">Product Name(<a href="#" id="compareme">Compare Diff</a>)</th>
    <th scope="col">Value-1</th>
    <th scope="col">Value-2</th>
    <th scope="col">Value-3</th>
    <th scope="col">Value-4</th>
  </tr>
  <tr>
    <td><input name="" type="checkbox" value="Product 123" /><span>Product 123</span></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td><input name="" type="checkbox" value="Product 124" /><span>Product 124</span></td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>4</td>
  </tr>
  <tr>
    <td><input name="" type="checkbox" value="Product 125" /><span>Product 125</span></td>
    <td>2</td>
    <td>4</td>
    <td>2</td>
    <td>4</td>
  </tr> 
</table>

</body>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("input[type='checkbox']").change(function(){
        console.log("this is checkbox done");
        var checked = this.checked,
            val = this.value,
            parentTR = jQuery(this).parent("tr");
            
            if(checked){
                parentTR.addClass("asd");
                }
            if(!checked){
                parentTR.addClass("no-asd");
                }    
        
        });
        
        });
        
        </script>
</html>

CSS

*{margin:0; padding:0;}
table{
    border:1px solid #ccc;
    border-width:1px 1px 0 0;
    }

table td,table th{
    border:1px solid #ccc;
    border-width:0 0 1px 1px ;
    padding:4px;
    }

  .highlight{background-color:#ccc}

JavaScript

if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
$=jQuery;
$(function(){
  $("#compareme").click(function(){
    var $row1 = $('input[type="checkbox"]:checked').parent().parent('tr')[0];
    var $row2 = $('input[type="checkbox"]:checked').parent().parent('tr')[1];
    
    var $columns1 = $row1.children('td').not($(this).first());
    var $columns2 = $row2.children('td').not($(this).first());
    
    $.each($columns1, function(key,value){
      if($columns1[key].val() != $columns2[key].val()){
           $columns1[key].addClass('highlight');
        }
    });
  });
});