Question

我想在页面首次加载时从表数据中选择第一行。我的VTK没有命中。请在这里建议我，我要走了。

报告视图

$('#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>

        }

Answer 1

您的jQuery选择器$('#Home').find('#tblStyles tr:first')将为您提供第一行表格。这并不意味着它是CSS类HomeSelect的第一行。实际上，选择器将为您提供第一行，即表标题（在其中调用DisplayNameFor帮助方法的位置。

您的click事件处理程序已连接到HomeSelect CSS类的元素。因此，请确保在调用第一个tr的click事件时，遵循相同的模式。

请确保在连接Click事件处理程序后使用JavaScript调用click事件。我建议您在jquery ready事件中连接所有事件处理程序。

$(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();  
});

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

1 个答案: