HTML Button Select specific column on table

Question

I would like to know how to select a specific column on the table..

This function make select all table... I Just want to select Heading 2,3 and parent Only... Like this pic :

I want to select text for Copying a columns (Ctrl+C)...

I'm trying this and working for select all content on the table...

 function selectElementContents(el) { var body = document.body, range, sel; if (document.createRange && window.getSelection) { range = document.createRange(); sel = window.getSelection(); sel.removeAllRanges(); try { range.selectNodeContents(el); sel.addRange(range); } catch (e) { range.selectNode(el); sel.addRange(range); } } else if (body.createTextRange) { range = body.createTextRange(); range.moveToElementText(el); range.select(); } } 

 #thead { background-color: #fffd99; } #table, th, td { border: 1px solid black; } 

 <input type="button" value="select table" onclick="selectElementContents( document.getElementById('table') );"> <br> <table id="table"> <thead> <tr> <th>Code</th> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> <thead> <tbody> <tr> <td>1774</td> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr> <td>1774</td> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr> <td>1774</td> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> </tbody> </table> 

Answer 1

 $('table th').click(function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected"); columnIndex = $(this).index() + 1; $('table tr td:nth-child(' + columnIndex + ')').removeClass("selected"); }else{ $(this).addClass("selected"); columnIndex = $(this).index() + 1; $('table tr td:nth-child(' + columnIndex + ')').addClass("selected"); $('table tr td:nth-child(' + columnIndex + ')').each(function(){ console.log('Selected value:',$(this).html()); }); } }); 

 .selected{ color:#0000FF; background-color:#000000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table cellspacing="2" cellpadding="4" border="1px"> <tr> <th>HEAD 1</th> <th>HEAD 2</th> <th>HEAD 3</th> </tr> <tr> <td>DATA 1</td> <td>DATA 2</td> <td>DATA 3</td> </tr> <tr> <td>DATA 1</td> <td>DATA 2</td> <td>DATA 3</td> </tr> <tr> <td>DATA 1</td> <td>DATA 2</td> <td>DATA 3</td> </tr> <tr> <td>DATA 1</td> <td>DATA 2</td> <td>DATA 3</td> </tr> <tr> <td>DATA 1</td> <td>DATA 2</td> <td>DATA 3</td> </tr> </table> 

Hope This will help you. Click Head and select Entire column.