时间戳

首页 > 解决方案 > 如何使用 JQuery 从表中选择第一行

jquery - 如何使用 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');

标签： jqueryhtmlrazor

解决方案

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

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

确保在连接 click 事件处理程序后click使用 JavaScript调用事件。我建议您在 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();  
});

推荐阅读