使用JQuery

时间:2017-08-01 11:03:08

标签: javascript jquery

我正在尝试从表中获取行数据,以便我可以在模态中使用它。以下是我的观点代码。

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
    $(document).ready(function () {
        $("#acctInfo").DataTable();
        $(".td_0").hide();
    });
</script>

<!-- Page Title
   ============================================= -->
<section id="page-title">

    <div class="container clearfix">
        <h1>View Accounts</h1>
    </div>
</section><!-- #page-title end -->


<section id="content">
    <div class="content-wrap">
        <div class="container clearfix">
            <table class="table table-striped table-condensed table-hover" id="acctInfo">
                <thead>
                <tr>
                    <th class="td_0">Account Id</th>
                    <th>Employee Id</th>
                    <th>First Name</th>
                    <th>Middle Name</th>
                    <th>Last Name</th>
                    <th>Business Name</th>
                    <th>Account Type</th>
                    <th></th>
                    @*<th></th>*@
                </tr>
                </thead>
                <tbody>
                @foreach (var i in Model.AccountsViews)
                {
                    <tr id="rowx">
                        <td > @Html.DisplayFor(m => i.AcctId)</td>
                        <td > @Html.DisplayFor(m => i.EmployeeId)</td>
                        <td > @Html.DisplayFor(m => i.FirstName)</td>
                        <td > @Html.DisplayFor(m => i.MiddleName)</td>
                        <td > @Html.DisplayFor(m => i.LastName)</td>
                        <td > @Html.DisplayFor(m => i.BusinessName)</td>
                        <td > @Html.DisplayFor(m => i.AccountType)</td>
                        @*<td><a href="javascript:void(0)" class="lnkEdit btn btn-success form-control">Edit</a></td>
                        <td><a href="javascript:void(0)" class="lnkDelete btn btn-danger form-control">Delete</a></td>*@
                        <td>
                            <input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
    </div>
</section>

<div id="divEdit" style="display: none;">
    <input type="hidden" id="hidId"/>
    <table>
        <tr>
            <td>Employee Id</td>
            <td><input type="text" id="txtEmployeeId" class="form-control"/></td>
        </tr>
        <tr>
            <td>First Name</td>
            <td><input type="text" id="txtFirstName" class="form-control"/></td>
        </tr>
        <tr>
            <td>Middle Name</td>
            <td><input type="text" id="txtMiddleName" class="form-control"/></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input type="text" id="txtLastName" class="form-control"/></td>
        </tr>
        <tr>
            <td>Business Name</td>
            <td><input type="text" id="txtBusinessName" class="form-control"/></td>
        </tr>
        @*<tr>
            <td>Account Type</td>
            <td>
                @Html.DropDownListFor(o => )
            </td>
        </tr>*@
    </table>
</div>

<script>

    function OpenSelected() {

        var a = $('.trSelected td').eq(4).text();
        alert(a);
    }
</script>

使用该代码,我可以使用以下代码调用alert方法:

<script>

        function OpenSelected() {

            var a = $('.trSelected td').eq(4).text();
            alert(a);
        }
    </script>

但它没有我需要的细胞的价值。它只有&#34; localhost / 1234说:&#34;警报没有价值。我需要你的帮助。谢谢。

2 个答案:

答案 0 :(得分:1)

尝试使用以下代码... .closset将为您提供所选行,而不是在索引的基础上找到列值。

           <script>
                $('.btn-success').click(function () {
                    var a = $(this).closest("tr").find('td:eq(0)').text();
                    var b = $(this).closest("tr").find('td:eq(1)').text();
                    alert(a);
                });
            </script>

答案 1 :(得分:-1)

在此上下文中尝试使用:eq()选择器

您应该使用.text()来检索其文字内容

var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);

或者做,

alert($('#table tr:eq(2) td:eq(4)').text());

DEMO