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 table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?

Working code for highlighting row:

 Table Highlight POC

```
        <script>

            function highlight() {
                var table = document.getElementById('dataTable');
                for (var i = 0; i < table.rows.length; i++) {
                    table.rows[i].onclick = function () {
                        if (!this.hilite) {
                            this.origColor = this.style.backgroundColor;
                            this.style.backgroundColor = '#BCD4EC';
                            this.hilite = true;
                        }
                        else {
                            this.style.backgroundColor = this.origColor;
                            this.hilite = false;
                        }
                    }
                }
            }

        </script>
        <style>

            table {
                border-spacing: 0px;
            }

            td {
                border: 1px solid #bbb;
                padding: 0.2em;
            }
        </style>
    </head>
    <body>
        <table id="dataTable">
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
        </table>
    </body>
</html>

```

Answer: 
You can use the following code:

```
$('td').on('click', function() {
    var $currentTable = $(this).closest('table');
    var index = $(this).index();
    $currentTable.find('td').removeClass('selected');
    $currentTable.find('tr').each(function() {
        $(this).find('td').eq(index).addClass('selected');
    });
});

```

Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to `$('#myTable td')`.

Also dont forget to add the `.selected{ background-color: #ace; }` class in yor css file.

Here is the [working example](http://codepen.io/fisniq/pen/LkyyjJ).

Cheers!
```
 <!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>onclick highlight</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 <script>
 $( document ).ready(function() {
     $( ".table tr" ).click(function(){
         $(".table tr" ).css("background-color","white");
         $(this).css("background-color","green");
     });
 });

 </script>
 </head>

 <body>
    <table class="table">
       <tr>
           <td>Date1</td>
           <td>Date2</td>
           <td>Date3</td>
      </tr>
      <tr>
           <td>Date1</td>
           <td>Date2</td>
           <td>Date3</td>
      </tr>
      <tr>
          <td>Date1</td>
          <td>Date2</td>
          <td>Date3</td>
      </tr>
     </table>
  </body>
  </html>

```