Select html table column by double click the column header - Jquery

@{
    ViewBag.Title = "selcolondblClick";
}

<h2>Select Column</h2>

<table  id="tbl_customers">
    <thead>
        <tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
        </tr>
    </tbody>
 </table>

<script type="text/javascript">
    $(function () {

        var tbl = $('#tbl_customers');

        //on hover change the mouse pointer to hand
        $(tbl).find('thead tr th').hover(function () {
            $(this).css('cursor', 'pointer');
        });

        //for adding cssclass to selected header cell
        $(tbl).find('thead tr th').dblclick(function () {
            $('.selectedHeader').removeClass();
            $('.selectedCell').removeClass();


            $(this).addClass('selectedHeader');
            var index = $(this).index() + 1;
            var tbl = $('#tbl_customers');
            var tds = $(tbl).find('td:nth-child(' + index + ')');
            $(tds).addClass('selectedCell');
        });
        //end of adding cssclass to selected  header cell

    });
</script>

<style type="text/css">
    .selectedHeader {
        background-color:gray;
    }

    .selectedCell {
        background-color: gray;
    }
</style>

Controller:-

   public ActionResult selcolondblClick()
        {
            try
            {
                return View();
            }
            catch (Exception)
            { }
            return null;
        }