62,046
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>录入一个列表信息</title>
<script src="/Scripts/knockout-3.4.0.js"></script>
<script src="/Scripts/jquery-1.12.3.min.js"></script>
</head>
<body>
<table class="am-table am-table-striped am-table-hover table-main" border="1" style="width:800px" id="tb">
<thead>
<tr>
<th class="table-title">姓名</th>
<th class="table-title">年龄</th>
<th class="table-title">身高</th>
<th>
<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-bind="click:function(){$root.AddNewRow()}"> 增加一行</button>
</th>
</tr>
</thead>
<tbody data-bind="foreach:$root.DataList">
<tr style="max-height:100px">
<td><input type="text" data-bind="value:name" /></td>
<td><input type="text" data-bind="value:age" /></td>
<td><input type="text" data-bind="value:shengao" /></td>
<td>
<button data-bind="click:function(){$root.DelRow($data)}">
删除
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="button" value="提交测试" data-bind="click:function(){$root.SubmitTest()}" />
<p id="error"></p>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
<script>
//定义模型对象
function Model() {
var self = this;
//定义数据列表
self.DataList = ko.observableArray([{ name: "", age: 0, shengao: 0 }]);
//新加一行
self.AddNewRow = function () {
model.DataList.push({ name: "", age: 0, shengao: 0 });
}
//删除一行
self.DelRow = function (item) {
model.DataList.remove(item);
}
//提交
self.SubmitTest = function () {
$("#error").html("提交给服务器的内容是: <br />" + JSON.stringify(model.DataList()));
}
}
//实例化对象
var model = new Model();
//邦定到元素上
ko.applyBindings(model, document.getElementById("tb"));
</script>