如何使用樣式綁定突出顯示錶格行？

我需要顯示基於表中選定行的詳細信息視圖。我想顯示錶中當前選中哪一行。是否有可能通過'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 } 
     ]) 
};

所以我想我需要一個參照當前行，或添加一個風格屬性，我的項目，然後綁定到這一點，然後更改點擊事件。有任何想法嗎？

來源

2011-07-12 rafn

你需要點擊事件綁定表中的每一行。一旦點擊了一行。然後在事件處理程序，您可以更改選定行的顏色+可以顯示新的細節

這樣的事情>http://jsfiddle.net/wrzFx/11/

來源

2011-07-12 10:06:10 neebz

看起來不錯！但我如何才能選擇「ko.observable」在jQuery的事件處理程序？我喜歡「數據綁定=「點擊：函數（）{viewModel.showItem（$數據）}」我試圖在同一時間來總結我的周圍淘汰賽和jQuery頭;） – rafn

確定是我不好，你可以。 class =「clickableRow」data-bind =「click：function（）{viewModel.showItem（$ data）}」' – rafn

我會通過jQuery live事件的錶行選擇綁定事件。在聆聽者內部，我會改變selectedRow屬性的值viewModel

這聽起來可能不是敲門聲的方式，但只要它有效，我都可以。

BTW，我不能進去的jsfiddle運行出於某種原因jQuery的模板。

來源

2011-07-12 10:03:52

這一行添加到他的jsfiddle>'ko.applyBindings（視圖模型）;' – neebz

@ nEEbz，哎！沒有注意到。你的解決方案正是我所暗示的。 –

如何使用樣式綁定突出顯示錶格行？

回答

相關問題