javascript - 如何使用样式绑定(bind)突出显示表格行？

Question

我需要根据表格中的选定行显示详细信息 View 。我想显示当前在表中选择了哪一行。是否可以使用“样式”绑定(bind)来做到这一点？

我创建了一个 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 }
        ])
};  

所以我想我需要一个对当前行的引用，或者为我的元素添加一个样式属性然后绑定(bind)到这个，然后在点击事件中改变。有什么想法吗？

Answer 1

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

像这样> http://jsfiddle.net/wrzFx/11/