Question

KO通过foreach绑定生成一个表：

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

我希望行可以选择。在极端简单的情况下，我可以用三个div和jQuery做到这一点。注意，我需要唯一标识被单击的行。在这个例子中，我通过阅读ID来做到这一点。

<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>

$('#row1, #row2, #row3').click(function() {
    console.log($(this).attr('id') + ' clicked');
       $(this).css('background-color','yellow');
});

使用KO生成我的<tr>如何为每行设置唯一值？

FIDDLE

Answer 1

添加＆＃34;已选择＆＃34;标记填充<tr>的商品：

ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington', isSelected: ko.observable(false) },
            { firstName: 'Charles', lastName: 'Charlesforth', isSelected: ko.observable(false) },
            { firstName: 'Denise', lastName: 'Dentiste', isSelected: ko.observable(false) }
        ]
    });

然后让您的<tr>绑定使用isSelected来应用css类，以及click绑定来切换isSelected状态（您可能不需要切换 - 我只是为这个例子做了那个）：

<tr data-bind='css: { selected: isSelected }, click: function() { $data.isSelected(!$data.isSelected()); }'>

Updated Fiddle

Answer 2

为什么需要一个独特的价值？如果您需要做的只是突出显示一行，您可以执行此操作。 http://jsfiddle.net/jayblanchard/d9bE6/4/

$('tr').click(function() {
       $(this).css('background-color','yellow');
});

您可以使用.each（） -

为每一行设置唯一ID

$('tr').each(function(index) {
    $(this).attr('id', index);
});

如何从foreach绑定创建可选行？

2 个答案: