Konckout第三个实例：循环绑定 -- table列表数据的填充
传统js：拼接字符串，再写入指定标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{border-collapse:collapse;border-spacing:0}
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<table>
<thead>
<td>id</td>
<td>英文名</td>
<td>中文名</td>
<td>描述</td>
</thead>
<tbody id="tablebody"></tbody>
</table>
</div> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/knockout30.js"></script>
<script>
var Planets = [
{id:1,englishName:"Mercury",chineseName:"水星",description:"离太阳最近的一颗行星"},
{id:2,englishName:"Venus",chineseName:"金星",description:"拥有非常厚的大气层的一颗行星"},
{id:3,englishName:"Earth",chineseName:"地球",description:"我们的家园"},
{id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"},
{id:5,englishName:"Jupiter",chineseName:"木星",description:"太阳系最大的行星"},
{id:6,englishName:"Saturn",chineseName:"土星",description:"拥有最美丽光环的行星"},
{id:7,englishName:"Uranus",chineseName:"天王星",description:"内核是个巨大的海洋（8000千米）"},
{id:8,englishName:"Neptune",chineseName:"海王星",description:"一颗优雅的淡蓝色行星"},
{id:9,englishName:"Pluto",chineseName:"冥王星",description:"曾经是行星的行星"}
];
function RenderPlanets(){
var tablebody = $('#tablebody');
var planetsString = "";
for(var i in Planets){
planetsString += "<tr>";
planetsString += "<td>"+Planets[i].id+"</td>";
planetsString += "<td>"+Planets[i].englishName+"</td>";
planetsString += "<td>"+Planets[i].chineseName+"</td>";
planetsString += "<td>"+Planets[i].description+"</td>";
planetsString += "</tr>";
}
tablebody.html(planetsString);
}
$(function(){
RenderPlanets();
});
</script>
</body>
</html>
knockout绑定，并且可以动态添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{border-collapse:collapse;border-spacing:0}
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
#content1{padding: 20px;}
</style>
</head>
<body>
<div id="content1">
<table>
<thead>
<tr>
<td>id</td>
<td>英文名</td>
<td>中文名</td>
<td>描述</td>
</tr>
</thead>
<tbody id="tablebody" data-bind="foreach:Planets">
<tr>
<td data-bind="html:id"></td>
<!--<td data-bind="html:$index"></td>--> <!--数组里有一个默认的id，从0开始-->
<td data-bind="html:englishName"></td>
<td data-bind="html:chineseName"></td>
<td data-bind="html:description"></td>
</tr>
</tbody>
</table>
</div>
<a href="#" data-bind="click:newPlanet" style="border: 1px solid darkgoldenrod;">新增</a> <script src="js/jquery.js"></script>
<script src="js/knockout30.js"></script>
<script>
var Planets = [
{id:1,englishName:"Mercury",chineseName:"水星",description:"离太阳最近的一颗行星"},
{id:2,englishName:"Venus",chineseName:"金星",description:"拥有非常厚的大气层的一颗行星"},
{id:3,englishName:"Earth",chineseName:"地球",description:"我们的家园"},
{id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"},
{id:5,englishName:"Jupiter",chineseName:"木星",description:"太阳系最大的行星"},
{id:6,englishName:"Saturn",chineseName:"土星",description:"拥有最美丽光环的行星"},
{id:7,englishName:"Uranus",chineseName:"天王星",description:"内核是个巨大的海洋（8000千米）"},
{id:8,englishName:"Neptune",chineseName:"海王星",description:"一颗优雅的淡蓝色行星"},
{id:9,englishName:"Pluto",chineseName:"冥王星",description:"曾经是行星的行星"}
];
$(function(){
var ViewModel = function(){
var self = this;
self.Planets = ko.observableArray(Planets);
self.newPlanet = function(){
self.Planets.push({id:10,englishName:"unknow",chineseName:"未知",description:"等待发现"});
return false;
}
}
var currentViewModel = new ViewModel();
ko.applyBindings(currentViewModel);
});
</script>
</body>
</html>
如果想在循环到地球的时候加一个标记，应该怎么办呢：
<tbody id="tablebody" data-bind="foreach:Planets">
<tr>
<td data-bind="html:id"></td>
<!--<td data-bind="html:$index"></td>--> <!--数组里有一个默认的id，从0开始-->
<td data-bind="html:englishName"></td>
<!--<td data-bind="html:chineseName"></td>-->
<td data-bind="html:(chineseName == '地球' ? chineseName+'<b>[家]</b>':chineseName)"></td>
<td data-bind="html:description"></td>
</tr>
</tbody>
Konckout第三个实例：循环绑定 -- table列表数据的填充的更多相关文章
- 小程序for循环绑定每组数据的id，并通过id获取里面某个数组的值的方法
WXML: <block wx:for="{{nums}}" wx:for-index='key' wx:for-item='item'> <view class ...
- easyui中加载table列表数据 第一次有数据第二次没有数据问题
$('#allUsingProductTable').datagrid({ 加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解 ...
- 01 《i》控制字体大小 v-for循环绑定类名 v-bind 结合三目运算 动态添加类
1==>控制字体图标的大小用 font-size:16px; <i class="el-icon-arrow-left right-show-aside-icon"&g ...
- javascript闭包传参和事件的循环绑定
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...
- dom元素循环绑定事件的技巧
以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...
- 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- 小程序实践（五）：for循环绑定item的点击事件
微信展示列表效果借助于 wx:for 简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...
- JS闭包中的循环绑定处理程序
前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件.就是这个问题让我整整调了一个下午.最后还是下班回家,上网查资料才知道怎么解决的. (PS:之前也在<jQuery基础教程>第四 ...
- v-for 循环 绑定对象 和数组
<!--v-for 迭代数组--> <div id="app11"> <div v-for="info in infos"> ...
随机推荐
- STL list 的insert()和erase()
list 类提供了insert(),erase()函数,它们分别增加和删除一个位于迭代器位置的元素. 1, insert() iterator insert(iterator pos,const T ...
- linux下驱动模块化编译，动态加载以及卸载
步骤:: 1.编写first_driver_hello.c文件,将其放在/linux2.6.32/drivers/char路径下: 2.在/linux2.6.32/drivers/cha/Kconfi ...
- Java获取某年某周的第一天
Java获取某年某周的第一天 1.设计源码 FirstDayOfWeek.java: /** * @Title:FirstDayOfWeek.java * @Package:com.you.freem ...
- 【BZOJ4199】【NOI2015】品酒大会（后缀数组）
[BZOJ4199][NOI2015]品酒大会 题面 BZOJ Uoj 洛谷 题解 考虑最裸的暴力 枚举每次的长度 以及两个开始的位置 检查以下是否满足条件,如果可以直接更新答案 复杂度\(O(n^3 ...
- [HNOI2013]消毒
题目大意: 网址:https://www.luogu.org/problemnew/show/3231 大意:a×b×c的三维空间里有a×b×c个点(x,y,z),其中有些点需要被消除. 消除的方法为 ...
- 如何巧妙的利用selenium和requests组合来进行操作需要登录的页面
一.在这里selenium的作用 (1)模拟的登录. (2)获取登录成功之后的cookies 代码 def start_login(self): chrome_options = Options() ...
- thoughtworks面试题分析与解答
题目描述 A squad of robotic rovers are to be landed by NASA on a plateau on Mars. This plateau, which is ...
- Windows 8 系统快捷键热键列表收集
值得收藏参考的 Windows 8 系统快捷键热键列表收集大全汇总,键盘党效率党必备啊! 相信不少喜欢接触新鲜软件的同学都已经给电脑安装上Windows 8 操作系统了吧!这个系统优秀与否我们暂且不讨 ...
- 关于win8/win8.1系统不能调节亮度的解决办法
有时候我们重装了win8系统之后开始可以调节亮度,但是再重新安装了显卡驱动之后发现不能调节亮度了,解决办法就是添加一项注册表. 下载地址:http://7xnarc.com1.z0.glb.cloud ...
- CVPR2018: Unsupervised Cross-dataset Person Re-identification by Transfer Learning of Spatio-temporal Patterns
论文可以在arxiv下载,老板一作,本人二作,也是我们实验室第一篇CCF A类论文,这个方法我们称为TFusion. 代码:https://github.com/ahangchen/TFusion 解 ...