javascript挑战编程技能-第八题：99乘法表

本文链接：https://blog.csdn.net/onil_chen/article/details/69370950

今天比较晚，直接进入正题吧！

题目：创建一个程序，生成从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" οnchange="changeSelect()"></select>
<select id="last" οnchange="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>

代码运行如下：