Question

我有一个View，其中我有一个包含四列和多行的表。三列有字符串值，最后一列有一个按钮。我的要求是点击按钮我应该得到第一列的值。我的代码如下：

 @(Html.Kendo().Grid<Invoice.Models.ViewModels.Setup.AccountViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.AccountType).Title("Account Type").Width(200);
        columns.Bound(p => p.AccountName).Title("Account Name").Width(200);
        columns.Bound(p => p.Currency).Title("Currency").Width(200);
        columns.Bound(p => p.lkpStatus).Width(225).HtmlAttributes(new { style = "text-align:center" })
                        .ClientTemplate("# if(data.lkpStatus == 1) " +
                                           "{# <span class='label label-success'>Active</span> #} " +
                                           "else if(data.lkpStatus ==2) {# <span class='label label-warning'>Blocked</span>#}"+
                                           "else {#<span class='label label-important'>InActive</span># } #").Title("Status");

        columns.Command(command => command.Edit()).ClientFooterTemplate("stst").Width(200).Title("Action");
    }).ToolBar(toolbar =>
     {
         toolbar.Template(@<text>
            <div class="row-fluid">
                <div class="span1">
                    <div class="toolbar" style="height:25px;">
                        <ul id="menu" style="width:38px; margin-left:22px;" class="span6">
                            <li style="width:36px;">
                                <i class="fa fa-plus"></i>
                                <ul>
                                    @foreach (var account in @ViewBag.AccountType)
                                    {
                                        <li style="width:100px;" class="openid">
                                            @if (@account.Value == "Bank")
                                            {
                                                <label id="Bank1">@account.Value</label>
                                            }
                                            @if (@account.Value == "CreditCard")
                                            {
                                                <label id="Credit">@account.Value</label>
                                            }
                                            @if (@account.Value == "Cash")
                                            {
                                                <label id="Cash1">@account.Value</label>
                                            }
                                        </li>

                                    }
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </text>);
     })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("UpdateAccount"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()

        //.Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.AccountID))

        .Read(read => read.Action("Account_Read", "Setup"))
        .Update(update => update.Action("Account_Update", "Setup"))
    )
)    <script>
        $('button').click(function() {
            $(this).parent().siblings().each(function() {
                alert('index ' + this.cellIndex + ': ' + $(this).text());
            });
        });
    </script>

Answer 1

最简单的解决方案，将:first选择器添加到siblings()。

$('button').click(function() {
    $(this).parent().siblings(':first').each(function() {
        alert('index ' + this.cellIndex + ': ' + $(this).text());
    });
});

http://jsfiddle.net/66G3r/

Answer 2

这个怎么样？

$('button').click(function() {
    var first_text = $(this).closest('tr').children('td').first().text();
    alert(first_text);   
});

使用.closest（）函数将首先出现tr父项，然后使用.children.first查找第一个td子项。

Answer 3

<table>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>Ball</td>
        <td>Cat</td>
        <td>
            <button>Edit</button>
        </td>
    </tr>
    <tr>
        <td>Apple2</td>
        <td>Ball2</td>
        <td>Cat2</td>
        <td>
            <button>Edit</button>
        </td>
    </tr>
</table>


$('button').click(function() {
    alert($(this).closest("tr").find("td:first-child").text());
});

http://jsfiddle.net/j6AYu/

Answer 4

试试这个：

$('button').click(function() {
    $(this).closest('tr').find('td').first().each(function() {
        alert('index ' + this.cellIndex + ': ' + $(this).text());
    });
});

在点击包含按钮的最后一列时获取表格的第一列值

4 个答案: