<!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. Laxcus大数据管理系统2.0（2）- 第一章 基础概述 1.1 基于现状的一些思考

    第一章 基础概述 1.1 基于现状的一些思考 在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...

  2. .NET程序与CA对接一直提示重定向

    最可能问题:应用程序服务器与CA服务器时间不同步 解决方法: 打开时间,选择internet时间,操作如图,在.net程序服务器 输入CA服务器的IP ,或者CA服务器输入 .net程序部署服务器的I ...

  3. iis 站点部署后 Microsof .Net Framework异常

    最近在部署站点到 iis 中时,遇到 iis 崩溃的问题,一打开部署好 的站点后,就出现 Microsoft .Net Framework 异常的消息提示,具体的 异常情况如下: 于是在网上查找了很多 ...

  4. 详细讲解JAVA中的IO流

    一.流的概念        流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等.        ...

  5. TCP/IP详解学习笔记（15）-- TCP的流量控制和拥塞控制

    TCP的流量控制 1.概述      所谓的流量控制就是让发送方的发送速率不要太快,让接收方来得及接受.利用滑动窗口机制可以很方便的在TCP连接上实现对发送方的流量控制.TCP的窗口单位是字节,不是报 ...

  6. uinavigation样式

    UINavigationController* pNav = [[UINavigationController alloc] initWithRootViewController:pView]; [p ...

  7. Windows API学习---插入DLL和挂接API

    插入DLL和挂接API 在Microsoft Windows中,每个进程都有它自己的私有地址空间.当使用指针来引用内存时,指针的值将引用你自己进程的地址空间中的一个内存地址.你的进程不能创建一个其引用 ...

  8. WIN32 DLL中使用MFC

    最近用WIN32 DLL,为了方便要用到MFC的一些库,又不想转工程,就网上找了很多方法,发现没有详细的介绍,有的也行不通,现在成功在WIN32 DLL中使用了MFC,记录一下以防以后用到忘记 一.修 ...

  9. 【MySQL】binlog_format以及binlog事务记录分析

    MySQL官方对于binlog_format参数的说明: http://dev.mysql.com/doc/refman/5.5/en/binary-log-setting.html binlog_f ...

  10. plsql 登录后，提示数据库字符集（AL32UTF8）和客户端字符集（ZHS16GBK）不一致

    plsql 登录后,提示数据库字符集(AL32UTF8)和客户端字符集(ZHS16GBK)不一致 (2014-07-25 18:40:34)转载▼ 标签: it 分类: Database Databa ...