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: 
Please try this:

```js
$("#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");
  });
});
```

```css
.highlight {
  background-color: yellow;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="dataTable">
  <tr><td>Data1</td><td>Data2</td></tr>
  <tr><td>Data1</td><td>Data2</td></tr>
  <tr><td>Data1</td><td>Data2</td></tr>
</table>
```
A fork Fisnik Tahiri solution to support also the tr selection (based on css or jquery if you preferir)

css:

```
.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }

```

Js:

```
$('td').on('mouseenter', function() {
    var $currentTable = $(this).closest('table');
    //var $row = $(this).closest('tr');
    var index = $(this).index();

    //clean
    $currentTable.find('td').removeClass('selected');

    //select row if you want use js
    //$currentTable.find('tr').removeClass('selected');
    //$row.addClass('selected');

    //select column
    $currentTable.find('tr').each(function() {
       $(this).find('td').eq(index).addClass('selected');
    });
});

```

[working example](https://codepen.io/avol-io/pen/ZJWYMJ "working example")