How to highlight a table row using style binding?

Question

I need to show a details view based on a selected row in a table. I would like to show which row is currently selected in the table. Is it possible to do this with the 'style' binding? I've created a JSFidle with some code illustrating the idea...or lack of, since it currently all rows change color on row click. Here's the code:

Name	Sales	Price

${name} ${sales} ${price} And this is the 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 } ]) }; So I think I need a reference to the current row, or adding a style attribute to my item and then bind to this, and then change in the click event. Any ideas? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You'll need to bind a click event to each row of the table. Once a row is clicked. then in the event handler you can change the color of the selected row + you can show the new details something like this > http://jsfiddle.net/wrzFx/11/