使用javascript创建包含立方体和正方形数字的表

create table contain cube and square of numbers using javascript

本文关键字：正方形 数字 立方体 javascript 创建 包含 使用      更新时间：2023-09-26

我几天前刚开始学习javascript，我想创建一个表，列出数字1到20及其平方和立方，但我未能创建它。有人能帮我吗?

下面是我的代码: 
<!DOCTYPE html>
<html>
<body>
    <table id="mytable"></table>
    <script>
        var number = new Array(20);
        for(var i =0; i<number.length; i++)
        {
            number[i] = i+1;
        }
        var table = document.getElementById("mytable");
        var caption = table.createCaption();
        caption.appendChild(document.createTextNode("cube and square"));
        var thead = table.createTHead();
        var tbody = table.createTBody();
        var thr = thead.insertRow(-1);
        var thr_d0 = thr.insertCell(-1);
        thr_d0.appendChild(document.createTextNode("num"));
        var thr_d1 = thr.insertCell(-1);
        thr_d1.appendChild(document.createTextNode("square"));
        var thr_d2 = thr.insertCell(-1);
        thr_d2.appendChild(document.createTextNode("cube"));
        var cube = new Array();
        var square = new Array();
        for(var i = 0; i < number.length; i++) {
            cube[i] = Math.pow(number[i],3);
            square[i] = Math.pow(number[i],2);
            var tbr = tbody.insertRow(-1);
            var tbr_d0 = tbr.insertCell(-1);
            tbr_d0.appendChild(document.createTextNode(square[i]));
            var tbr_d1 = tbr.insertCell(-1);
            tbr_d1.appendChild(document.createTextNode(cube[i]);
        }
    </script>
</body>
</html>

我认为使用数组使问题过于复杂。相反，只需使用for循环并使用基本算术插入值:

<table id="myTable"></table>
<script>
    //assign the table to a variable
    var table = document.getElementById("myTable");
    //title the different columns with number, square, and cube
    var head = table.insertRow(0);
        head.insertCell(-1).innerHTML = "number";
        head.insertCell(-1).innerHTML = "square";
        head.insertCell(-1).innerHTML = "cube";
    //run a for loop to put the squares and cubes of 1 to 20
    for (var i = 1; i < 21; i++){
        var holder = table.insertRow(-1);
        holder.insertCell(-1).innerHTML = i;
        holder.insertCell(-1).innerHTML = (i*i);
        holder.insertCell(-1).innerHTML = (i*i*i);
    }
</script>
相关文章：