Question

我需要根据表格中的选定行显示详细信息视图。我想显示当前在表格中选择哪一行。是否可以使用'style'绑定来完成此操作？

我创建了一个JSFidle，其中有一些代码说明了这个想法......或者缺少了，因为目前所有行都会在行点击时改变颜色。这是代码：

<table>
   <tr>
       <th>Name</th>
       <th>Sales</th>
       <th>Price</th>
    </tr>
  <tbody data-bind='template: { name: "fieldTemplate", foreach: viewModel.items}'></tbody>
</table>


<script type="text/html" id="fieldTemplate">
    <tr >
         <td> ${name}</td>
         <td>${sales}</td>
         <td>${price}</td>
    </tr>
</script>

这是Javascript：

var viewModel = {
    items: ko.observableArray([
            { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
            { name: "Speedy Coyote", sales: 89, price: 190.00 },
            { name: "Furious Lizard", sales: 152, price: 25.00 },
            { name: "Indifferent Monkey", sales: 1, price: 99.95 },
            { name: "Brooding Dragon", sales: 0, price: 6350 },
            { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
            { name: "Optimistic Snail", sales: 420, price: 1.50 }
        ])
};

所以我认为我需要对当前行的引用，或者为我的项添加一个style属性然后绑定到它，然后更改click事件。有什么想法吗？

Answer 1

您需要将click事件绑定到表的每一行。单击一行后。然后在事件处理程序中，您可以更改所选行的颜色+您可以显示新的详细信息

这样的事情＆gt; http://jsfiddle.net/wrzFx/11/

Answer 2

我会通过jQuery live事件在表行上绑定选择事件。在监听器内部，我会更改selectedRow

中viewModel属性的值

这可能听起来不像是敲门的做法，但只要它有效，我就可以了。

顺便说一句，由于某些原因，我无法在jsFiddle中运行jQuery模板。

如何使用样式绑定突出显示表行？

2 个答案: