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