knockoutjs表格增加更新删除
<!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表格增加更新删除的更多相关文章
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 扩展BindingList，防止增加、删除项时自动更新界面而不出现“跨线程操作界面控件 corss thread operation”异常
在做界面程序时,常常需要一些数据类,界面元素通过绑定等方式显示出数据,然而由于UI线程不是线程安全的,一般都需要通过Invoke等方式来调用界面控件.但对于数据绑定bindingList而言,没法响应 ...
- DML数据操作语言之增加，删除，更新
1.数据的增加 数据的增加要用到insert语句 ,基本格式是: insert into <表名> (列名1,列名2,列名3,......) values (值1,值2,值3,..... ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- 我的MYSQL学习心得（八） 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
- 10月28日下午MySQL数据库的增加、删除、查询（匹配数据库登录和可以增、删、查的显示数据库内容的页面））
一.匹配数据库登录 步骤: 1.做一个普通的登录界面,注意提交方式为post. <!--登录界面--> <form action="chuli.php" meth ...
- 10月16日下午MySQL数据库CRUD操作（增加、删除、修改、查询）
1.MySQL注释语法--,# 2.2.后缀是.sql的文件是数据库查询文件. 3.保存查询. 关闭查询时会弹出提示是否保存,保存的是这段文字,不是表格(只要是执行成功了表格已经建立了).保存以后下次 ...
- hibernate 批量增加 修改 删除
4.2 Hibernate的批量处理 Hibernate完全以面向对象的方式来操作数据库,当程序里以面向对象的方式操作持久化对象时,将被自动转换为对数据库的操作.例如调用Session的delete ...
- Entity Framework4.0 (六) EF4的 增加、删除、更改
前面介绍了EF4的查询功能,主要是借助于LINQ的强大的查询功能和它简单的语法.让我们可以完全面向对象集体去进行查询,而不必去劳心处理那些关系型数据库表的操作.这样我们更容易把主要精力集中在业务逻辑上 ...
随机推荐
- Unity AssetBundles and Resources指引 （一）
本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and- ...
- 如何正确的使用Lerp In Unity
摘要 本文探讨如何用lerp实现近似的匀速旋转,当然如果运用本文给出的方法,使用slerp则可以实现匀速旋转,并指出Unity官方lerp示例代码的一些缺陷. 现有问题 比如四元数Lerp API: ...
- [译] Closures in Lua - Lua中的闭包
原文:(PDF) . 摘要 一等(first-class)函数是一种非常强大的语言结构,并且是函数式语言的基础特性.少数过程式语言由于其基于栈的实现,也支持一等函数.本文讨论了Lua 5.x用于实现一 ...
- GLib基础
实用功能 GLib中包含了近二十种实用功能,从简单的字符处理到初学者很难理解的XML解析功能,这里介绍两种较简单的:随机数和计时. 下面代码演示如何产生1-100之间的随机整数和演示如何计算30000 ...
- 数据结构（一）之HelloWord
最近由于学习上面的需要,要重新的看看数据结构方面的知识!当然,我觉得数据结构也非常的重要,下面是我的学习的一点小小的记录,以备日后的查看! 我的环境: 1:操作系统:windows7 2:编码环境:M ...
- 关于java.lang.IllegalStateException
今天调试程序时遇到了java.lang.IllegalStateException org.apache.catalina.connector.ResponseFacade.sendRedirect( ...
- ios项目记录
1,如何隐藏状态栏 在基类中重载UIViewController.h中的这个方法 - (BOOL)prefersStatusBarHidden { // iOS7后,[[UIApplication s ...
- WP8_GestureListener实现列表向下滑动加载新数据
利用GestureListener的OnDragCompleted事件,实现列表向下滑动时,加载新的数据: (不建议使用 Touch.FrameReported+=Touch_FrameReporte ...
- RPC通信（Windows版、Android版）
1.RPC通信模型 2.调用截图 服务器端 PC客户端: Android客户端: 3.remotetea jrpcgen.jar:生成Java源文件 oncrpc.jar:框架通信调用 portmap ...
- shell script 基本语法
几个符号的意义$#:代表后接的参数『个数』,以上表为例这裡显示为『 4 』:$@:代表『 "$1" "$2" "$3" "$4&q ...