如何使用jquery从表中选择第一行

我想在页面首次加载时从表数据中选择第一行。我的 $('#Home').on('click', '#tblStyles .HomeSelect', function () { 不打。请建议我这里我做错了。

报表视图

<ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#Home">Home</a></li>          
        </ul>
        <div class="tab-content">
            <div id="Home" class="tab-pane fade in active">
                @Html.Partial("~/Views/Home/Home.cshtml", Model.clsHome)
            </div>

        </div>

家景

<div class="panel panel-default">
        <table id="tblStyles" class="table table-hover">
            <tr class="no-hover" style="border-top:hidden">
                <th>
                    @Html.DisplayNameFor(m => m.ProductName)
                </th>            

            </tr>

            @foreach (var item in Model)
            {
                <tr class="HomeSelect" data-productcode="@item.ProductCode">

                    <td align="right">
                        @Html.DisplayFor(modelItem => item.ProductCode)
                    </td>

                </tr>
            }
        </table>
    </div>
            @using (Html.BeginForm("Home", "Home", FormMethod.Post, new { id = "Form" }))
        {
            <div id="mypartial"> </div>

        }

脚本

   $(document).ready(function () {             
            $('#Home').find('#tblStyles tr:first').addClass("selected").click();              
        });

     $('#Home').on('click', '#tblStyles .HomeSelect', function () {

            var id = $(this).data('productcode');

$(function () { $('#Home').on('click', '#tblStyles .HomeSelect', function () { var id = $(this).data('productcode'); alert(id); }); // Invoke click on the first row with "HomeSelect" CSS class // The header row does not have that class. $('#Home').find('#tblStyles tr.HomeSelect:first').click(); });