js表格编程实例（js表格编程实例教程）

更新：2022-11-09 07:08

本文目录一览：

1. js编写一个可以循环的表格
2. 用js怎么建表格？
3. 怎么用js做一个表格

js编写一个可以循环的表格

可以的，最简单的实现方式如下：

<div id="t"></div>
<script>
var html = "<table>";
for(var i=0; i<3; i++){
    html += "<tr>";
    for(var j=0; j<5; j++){
        html += "<td>";
        html += i + "行" + j + "列";
        html += "</td>";
    }
    html += "</tr>";
}
html += "</table>";
console.log(html);
document.getElementById('t').innerHTML = html;
</script>

用js怎么建表格？

<input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" />
<script type="text/javascript">
function createTable(width, rows, cells) {
    // 创建一个表格对象
    var mytable = document.createElement("table");
    mytable.cellSpacing = "1px";
    // 创建一个表头对象
    var mythead = document.createElement("thead");
    for(a=0; a<1; a++) {
        var myrow = document.createElement("tr");
        for(b=0; b<cells; b++) {
            var mytd = document.createElement("td");
            mytd.innerHTML = "表 头 " + (b+1);
            mytd.style.cssText = "text-align:center;";
            myrow.appendChild(mytd);
        }
        mythead.appendChild(myrow);
    }
    // 创建一个表体对象
    var mytbody = document.createElement("tbody");
    for(i=0; i<rows; i++) {
        var myrow = document.createElement("tr");
        for(j=0; j<cells; j++) {
            var mytd = document.createElement("td");
            mytd.style.backgroundColor = "#fff";
            mytd.innerHTML = "第" + (i+1) + "行第" + (j+1) + "列";
            myrow.appendChild(mytd);
        }
        mytbody.appendChild(myrow);
    }
    // 创建一个表脚对象
    var mytfoot = document.createElement("tfoot");
    for(c=0; c<1; c++) {
        var myrow = document.createElement("tr");
        for(d=0; d<1; d++) {
            var mytd = document.createElement("td");
            mytd.innerHTML = "脚" + (d+1);
            mytd.style.cssText = "text-align:center;";
            mytd.colSpan = "10";
            myrow.appendChild(mytd);
        }
        mytfoot.appendChild(myrow);
    }
    // 将表头追加到表格
    mytable.appendChild(mythead);
    // 将表体追加到表格
    mytable.appendChild(mytbody);
    // 将表脚追加到表格
    mytable.appendChild(mytfoot);
    // 追加对象样式
    mythead.style.cssText = "background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:" + width + "px;";
    mytable.style.cssText = "background-color:#999; border:0px; width:" + width + "px;";
    mytfoot.style.cssText = "background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:" + width + "px;";
    document.body.appendChild(mytable);
}
</script>

怎么用js做一个表格

1. 在页面div中创建一个空白表，可以根据需要对其进行定制。
2. 创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。
3. 在TB标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。
4. 获取表中的数据，以供下图参考。
5. 一旦我们获得了表中的数据，我们就应该将其转换成JSON数据的形式。