在当前行中查找第一列文本

Question

我不确定是否存在异常，因为我正在使用 Knockout，但我似乎无法获取第一列的文本值。

当我连续点击一个按钮时，我试图获取与该行关联的第一个单元格的文本，不包括 headers（仅 ID 字段）。

这是我的基本 HTML。

<table class="table table-bordered table-striped text-center" id="plan_table">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                Description
            </th>
            <th>
                # of Payouts
            </th>
            <th>
                Edit
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: paymentOption">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: description"></td>
            <td data-bind="text: paymentQuantity"></td>
            <td>
                <button class="btn btn-default" onclick="reroute()"><i class="glyphicon glyphicon-pencil"></i></button>
            </td>
        </tr>
    </tbody>
</table>

这是我正在尝试的（以及在 Whosebug 上找到的任何解决方案）...

function reroute() {
    var name = $(this).closest('tr').find('td:first').text();
    //$(this).closest('tr').children('td:eq(0)').text();
    console.log(name);
}

每次我得到一个空字符串，我不知道为什么。

Answer 1

由于您使用的是 onclick 属性，因此您应该将 this（事件调用者）传递给方法：

<button class="btn btn-default" onclick="reroute(this)"><i class="glyphicon glyphicon-pencil"></i></button>

脚本：

function reroute(el) {
    var name = $(el).closest('tr').find('td:first').text();
    //$(this).closest('tr').children('td:eq(0)').text();
    console.log(name);
}

JSFiddle

不过，如果可能的话，我会unobtrusive

<button class="btn btn-default my-btn"><i class="glyphicon glyphicon-pencil"></i></button>

脚本：

$('.my-btn').click(function(){
    var name = $(this).closest('tr').find('td:first').text();
    //$(this).closest('tr').children('td:eq(0)').text();
    console.log(name);
});

JSFiddle

Answer 2

试试这个：

function reroute() {
    var name = $(".table").find('td:first-child').text();
    console.log(name);
}

Answer 3

当您使用 Knockout 时，您不应该从 HTML 抓取数据。您的按钮可以访问行数据（很方便，在 $data 中）。

<button class="btn btn-default" onclick="reroute($data.Id)">

应该将您想要的数据传递给重新路由功能。

我创建了一个有效的 fiddle。有许多细节需要以淘汰赛的方式处理。 http://jsfiddle.net/srndhvv7/1/

在当前行中查找第一列文本

Find first column text in current row

jquery

knockout.js