<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script type="text/javascript" src="js/knockout-2.2.0.debug.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
//定义user数据对象
function UserViewModel(id, name, score) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
self.score = ko.observable(score);
}
//定义ViewModel
function ViewModel() {
var self = this;
self.users = ko.observableArray(); //添加动态监视数组对象
self.removeUser = function(user) {
self.users.remove(user);
}
self.totalscore = ko.computed(function() {
var total = 0;
$.each(self.users(), function(i, u) {
total += u.score();
})
return total;
});
};
$(function() {
var vm = new ViewModel();
//预先添加一些数据
vm.users.push(new UserViewModel("d1", "rohelm", 121));
vm.users.push(new UserViewModel("d2", "halower", 125));
$("#btnAddUser").click(
function() {
vm.users.push(new UserViewModel($("#u_id").val(), $(
"#u_name").val(), parseInt($("#u_score").val())));
});
$("#btnUpdateScore").click(
function() {
vm.users()[vm.users().length - 1].score(
parseInt($("#u_score").val())).name(
$("#u_name").val()).id($("#u_id").val());
});
ko.applyBindings(vm);
});
</script>
</head> <body>
<section style="margin: 250px">
<section>
ID <input type="text" id="u_id" style="width: 30px"> Name <input
type="text" id="u_name" style="width: 30px"> Score <input
type="text" id="u_score" style="width: 30px"> <br /> <input
value="Add" id="btnAddUser" type="button"
style="width: 200px; background-color: #ff6a00;" /> <br /> 共 <span
data-bind="text: users().length"> </span> 条--------------合计 <span
data-bind="text: totalscore"> </span> 分
</section>
<section>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Score</th>
<th>Option</th>
</tr>
</thead>
<tbody data-bind="foreach: users">
<tr>
<td><span data-bind="text: id"> </span></td>
<td><span data-bind="text: name"> </span></td>
<td><span data-bind="text: score"> </span></td>
<td><a href='#' data-bind="click: $root.removeUser">
Remove </a></td>
</tr>
</tbody>
</table>
<input value="Update测试" id="btnUpdateScore" type="button"
style="width: 200px; background-color: #ff6a00;" /> <br />
</section>
</section>
</body> </html>

界面:修改于http://www.aizhengli.com/knockoutjs-shizhan/88/knockoutjs-shishi.html

knockoutjs表格增加更新删除的更多相关文章

  1. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 扩展BindingList,防止增加、删除项时自动更新界面而不出现“跨线程操作界面控件 corss thread operation”异常

    在做界面程序时,常常需要一些数据类,界面元素通过绑定等方式显示出数据,然而由于UI线程不是线程安全的,一般都需要通过Invoke等方式来调用界面控件.但对于数据绑定bindingList而言,没法响应 ...

  3. DML数据操作语言之增加,删除,更新

    1.数据的增加 数据的增加要用到insert语句  ,基本格式是: insert into <表名> (列名1,列名2,列名3,......) values (值1,值2,值3,..... ...

  4. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  5. 我的MYSQL学习心得(八) 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  6. 10月28日下午MySQL数据库的增加、删除、查询(匹配数据库登录和可以增、删、查的显示数据库内容的页面))

    一.匹配数据库登录 步骤: 1.做一个普通的登录界面,注意提交方式为post. <!--登录界面--> <form action="chuli.php" meth ...

  7. 10月16日下午MySQL数据库CRUD操作(增加、删除、修改、查询)

    1.MySQL注释语法--,# 2.2.后缀是.sql的文件是数据库查询文件. 3.保存查询. 关闭查询时会弹出提示是否保存,保存的是这段文字,不是表格(只要是执行成功了表格已经建立了).保存以后下次 ...

  8. hibernate 批量增加 修改 删除

    4.2  Hibernate的批量处理 Hibernate完全以面向对象的方式来操作数据库,当程序里以面向对象的方式操作持久化对象时,将被自动转换为对数据库的操作.例如调用Session的delete ...

  9. Entity Framework4.0 (六) EF4的 增加、删除、更改

    前面介绍了EF4的查询功能,主要是借助于LINQ的强大的查询功能和它简单的语法.让我们可以完全面向对象集体去进行查询,而不必去劳心处理那些关系型数据库表的操作.这样我们更容易把主要精力集中在业务逻辑上 ...

随机推荐

  1. 【CImg】三角形绘制算法实现

    这周的CV基础练习是简单的图形绘制:比如说矩形.三角形和圆心什么的.会发现其实矩形和圆形的实现思路都很直白,矩形只需要确认两个对角坐标就可以了,圆心只需要确认圆心和半径,接着就是简单的遍历各个像素点判 ...

  2. Debian的一个命令

    dpkg是一个Debian的一个命令行工具,它可以用来安装.删除.构建和管理Debian的软件包.下面是它的一些命令解释:1)安装软件命令行:dpkg -i <.deb file name> ...

  3. Flex 列表控件中的操作

    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...

  4. 多线程查询FTP Server上的文件

    情形是这样的,最近做一个自动化的项目,当batch跑成功了,FTP Server上会有特定的生成文件.但是不确定是什么时候会有,大概是batch跑完了5分钟之内吧,所以在脚本里设置检查点的时候,需要每 ...

  5. phonegap ios默认启动页

    phonegap创建的项目默认的启动界面是phonegap的图标,想去掉这个图标,有两个方法,第一就是将resourece下面的splash文件下面的图片改成自己想要的启动页面,名字要相同,替换掉它默 ...

  6. iosiOS 地图 自定义以及添加锚点

    - (void)clickLongPress:(UILongPressGestureRecognizer *)longPress { CGPoint point = [longPress locati ...

  7. 移动端rem自适应布局关键代码

    function resi() { var html = document.querySelector("html"); var wW = document.body.client ...

  8. Linux下运行top命令显示的PR\NI\RES\SHR\S\%MEM TIME+都代表什么

    PID 进程号 USER 用户名 PR 优先级 NI nice值.负值表示高优先级,正值表示低优先级 RES 进程使用的.未被换出的物理内存大小,单位Kb S 进程状态: D 不可中断的睡眠状态 R ...

  9. 使用NPOI操纵Excle,并输入到客户端

    NPOI下载:http://files.cnblogs.com/files/gosky/NPOI_2.2.0.0.zip 导入以下5个引用: ICSharpCode.SharpZipLib.dll N ...

  10. 用Java实现一个堆排序

    堆可以看成是一个完全二叉树,而且非终端节点的值均不大于(不小于)其左右孩子节点的值.堆排序只需要一个记录大小的辅助空间,输出堆顶的值之后需要对堆进行调整建立新堆,找到剩下节点的最大值(最小值),反复执 ...