传统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>