欢迎光临
我们一直在努力

JavaScript | JS实现小学乘法表

今天一个小作业,要求通过JavaScript创建一个表格,然后根据这个表格实现一个九九乘法表,最近事情太多,就详细写每个过程了,只把关键点说一下。

先看一下HTML内容:

<table id="tb"></table>
<table id="tb2"></table>

下面,我创建了一个函数,用于生成对应表格元素(tr和td):

function tbCreat(row, col) {
        var i = 1;
        var tbElement = "";
        while (i <= row) {
          tbElement += "<tr>";
          j = 1;
          while (j <= col) {
            tbElement += "<td></td>";
            j++;
          }

          tbElement += "</tr>";
          i++;
        }
        return tbElement;
      }

上面函数的返回值为元素标签内所有内容,下面通过调用这个函数,并把返回值写入对应表格内:

document.getElementById("tb").innerHTML = tbCreat(5,5);
document.getElementById("tb2").innerHTML = tbCreat(9,9);

然后我们根据第二个生成的表格添加内容:

//向表格添加元素时,多出来一个tbody,不知道具体原因,这里把他取出来
var tBody = document.getElementById("tb2").firstChild; 
var i = 1;
var k = 1;
//外层循环遍历tr,内层循环遍历td,设置k值用于判断是否向遍历到的td添加内容
while(i<=9){
eleTr = tBody.childNodes.item(i-1);
var j = 1;
while(j<=9){
    eleTd = eleTr.childNodes.item(j-1);
    eleTd.innerHTML = j + 'x' + i + '=' + i*j;
    eleTd.style.border = '1px solid red';
    j++; 
    if(j == k+1) break;
}
k++;
i++;
}

最后效果如下图:

完整代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table{
        border-collapse: collapse;
        text-align: center;
        font-size: 20px;
        margin: 30px 0;
        color: red;
      }
      #tb td {
        border: 1px solid #000;
        width: 100px;
        height: 50px;
      }
      #tb2 td{
          width: 100px;
          height: 50px;
          
      }
    </style>
  </head>
  <body>
    <table id="tb"></table>
    <table id="tb2"></table>
    <script>
      // 生成5行5列表格
      //外循环row 内循环col 并添加相应节点
      function tbCreat(row, col) {
        var i = 1;
        var tbElement = "";
        while (i <= row) {
          tbElement += "<tr>";
          j = 1;
          while (j <= col) {
            tbElement += "<td></td>";
            j++;
          }

          tbElement += "</tr>";
          i++;
        }
        return tbElement;
      }
      document.getElementById("tb").innerHTML = tbCreat(5,5);
      //在上面表格生成一个乘法口诀表
      document.getElementById("tb2").innerHTML = tbCreat(9,9);
      //获取table元素,向子元素添加内容
      var tBody = document.getElementById("tb2").firstChild;
      var i = 1;
      var k = 1;
      while(i<=9){
        eleTr = tBody.childNodes.item(i-1);
        var j = 1;
        while(j<=9){
            eleTd = eleTr.childNodes.item(j-1);
            eleTd.innerHTML = j + 'x' + i + '=' + i*j;
            eleTd.style.border = '1px solid red';
            j++; 
            if(j == k+1) break;
        }
        k++;
        i++;
      }
    </script>
  </body>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | JS实现小学乘法表
分享到: 更多 (0)

评论 抢沙发

9 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏