javascript挑战编程技能-第八题：99乘法表
今天比较晚，直接进入正题吧！
题目：创建一个程序，生成从0到12的乘法表。
示例输出
0*0=0
0*1=0
...
12*11=132
12*12=144
条件：
使用一个嵌套循环来完成该程序。
这个没什么好说的，直接上代码吧！
前面的输入输出都讲得很详细了，这里直接上主要函数吧。这个很初级，没什么好说的。
<body>
<div id="output">
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
var htmlString = "";
for(var i = 0;i<=12;i++){
for(var j=0;j<=12;j++){
htmlString+="<p>"+i+"*"+j+"="+i*j+" </p>";
}
}
console.log(htmlString);
$('#output').html(htmlString)
</script>
</body>
挑战：
创建一个图形界面程序。使用下拉列表来修改基数。
当用户选中数字时，生成新的乘法表
生成一个下面的表
| 0 | 1 | |
| 0 | 0 | 0 |
| 1 | 0 | 1 |
这里要说的是html中关于table这个标签。这个之前“网络三剑客“时代，通过界面拖动自动生成的代码里面有这大量的table作为布局。
之后不知道为什么有不少的人很排斥使用table这个标签。但是，其实有时候这个标签真的好用。
在有表格样式需要的时候，我觉得既然设计了这个标签，那就一定有它存在的意义，这里提一句，希望大家不要排斥它。
在合适的时候使用table会减轻你很多的工作量哦，比如垂直布局，当然垂直布局有自己合适的方法。
<body>
<select id="first" onchange="changeSelect()"></select>
<select id="last" onchange="changeSelect()"></select>
<div id="output">
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
var init = function () {
//这里用循环生成12个选项，添加到两个选择框里面
var option = "";
for(var i = 0 ;i<=12;i++){
option+="<option value='"+i+"'>"+i+"</option>";
}
$('#first').html(option);
$('#last').html(option);
//00也要显示所以初始化调用一次
changeSelect()
}();
function changeSelect(){
var firstValue = $("#first").val();
var lastValue = $("#last").val();
if(firstValue && lastValue){
update(parseInt(firstValue),parseInt(lastValue));
}
}
function update(first,last){
var outString = "<table border='1'><tr><th> </th>";
//生成表头
for(var i = 0;i<=first;i++){
outString+="<th>"+i+"</th>";
}
outString+="</tr> ";
//生成内容
for(var j =0 ;j<=last;j++){
outString+="<tr><td>"+j+"</td>";
for(var k=0;k<=first;k++){
outString+="<td>"+k*j+"</td>";
}
outString += " </tr>"
}
outString += "</table>";
$('#output').html(outString);
}
</script>
</body>代码运行如下：
仔细阅读代码，可能你就会发现，使用jq做数据绑定的时候，会借助循环，而且代码也不便于管理。
后面如果程序中有再使用到比较大量的数据绑定，那我们就先选用最容易入门的angularjs来完成双向绑定。
第一次看到这个题目的时候，我还在想这是一个不错的题材，我可以讲得内容还不少，但是今天真正动手写时，
我却忘记我要写什么内容了。暂时做一个前记吧，后面有讲到相关内容再来重做这道题目吧。
这里值得一提的是，大家可以自己动手编写一下这个程序，对于理解循环嵌套还是很有帮助的，外循环内循环的执行顺序，
我想真正搞通这个题目的话，就能很好的理解循环的概念了。
第八节课就到这里结束了吧,
谢谢你的阅读.
有什么问题可以直接联系我本人微信:yu_xiaohu
希望大家关注我的个人公众号,有更新会在上面同步发布哦.
我是小虎Oni,希望你开心.
