How to highlight a column in html table on click using js or jquery?

Question

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with t

Answer 1

Please try this:

$("#dataTable tr td").click(function() {
  //Reset
  $("#dataTable td").removeClass("highlight");
  //Add highlight class to new column
  var index = $(this).index();
  $("#dataTable tr").each(function(i, tr) {
  	$(tr).find('td').eq(index).addClass("highlight");
  });
});

.highlight {
  background-color: yellow;
}

  
Data1
Data2
  
Data1
Data2
  
Data1
Data2