knockout.js表格刪除增加行，計算總金額例項
<html>
<head>
<title></title>
<script type="text/javascript" src="js/knockout-3.1.0.js"></script>
<style type="text/css">
.con {
width: 600px;
margin: 100px auto;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid #000;
height: 28px;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div class="con">
<p>
<button data-bind="click: addSeat(0), enable: seatExample().length < 10">+增加行。最多到總行數為10</button></p>
<!-- <p><button data-bind="click: addSeat(1)">+增加第二行</button></p>
<p><button data-bind="click: addSeat(2)">+增加第三行</button></p>-->
<table>
<thead>
<tr>
<td>固定名字</td>
<td>名字</td>
<td>價格</td>
<td>可選擇</td>
<td>刪除</td>
</tr>
</thead>
<!--foreach:繫結的是例項化後的viewmodel。都可以用到seatExample例項化的屬性。-->
<tbody data-bind="foreach: seatExample">
<tr>
<!--name:繫結的是靜態模板的第一個引數-->
<td data-bind="text: name"></td>
<!--meal().mealTit:繫結的是靜態模板的第二個引數，是一個可觀測值，具有function可修改值的功能。進一步呼叫viewmodel中賦予它的屬性值。-->
<td data-bind="text: meal().mealTit"></td>
<!--meal().price:繫結的是靜態模板的第二個引數，是一個可觀測值，具有function可修改值的功能。進一步呼叫viewmodel中賦予它的屬性值。-->
<td data-bind="text: '$' + meal().price.toFixed(2)"></td>
<!--select繫結viewmodel中新定義的閉包物件，獲取其屬性值，設定其value值為可觀測的meal值。-->
<td>
<select data-bind="options: $root.meals, value: meal, optionsText: 'mealTit'"></select></td> //在繫結為viewmodel中的內容時加上$root.可觀測值
<td>
<p>
<button data-bind="click: $root.removeSeat">-刪除一行</button></p>
</td>
</tr>
</tbody>
<tr>
<td colspan="5">總額：<span data-bind="text: totalPrice().toFixed(2)"></span></td>
</tr>
</table>
</div>
</body>
<script>
function seat(name, init) {//定義靜態模板
var self = this;
self.name = name;
self.meal = ko.observable(init); //定義可觀測值。可繫結，可更新，可觀測，可訂閱
}
function ViewModel() { //例項化
var _this = this;
_this.meals = [ //定義新的閉包物件，即function可設定可修改值。可再呼叫其內部屬性mealTit和price
{ mealTit: "meal_1", price: 0 },
{ mealTit: "meal_2", price: 100 },
{ mealTit: "meal_3", price: 200 }
];
_this.seatExample = ko.observableArray([ //用array來使陣列例項化物件成為可觀測值，可以被訂閱的。
new seat("name_1", _this.meals[0]), //把上面在viewmodel裡新定義的meals()物件(具備function功能，可訪問其屬性。)作為seat模板的第二個引數。array([,])
new seat("name_2", _this.meals[1]),
new seat("name_3", _this.meals[2])
]);
_this.addSeat = function (i) { //增加對靜態模板的操作。
_this.seatExample.push(new seat("name", _this.meals[i]));
}
_this.removeSeat = function (n) { //增加對靜態模板的操作。
_this.seatExample.remove(n);
}
_this.totalPrice = function () {
var total = 0;
for (var k = 0; k < _this.seatExample().length; k++) {
total += _this.seatExample()[k].meal().price;
}
return total;
};
}
// Activates knockout.js
ko.applyBindings(new ViewModel());
</script>
</html>