怎么用js做一个表格
通过动态创建table,tr,td的方式进行表格创建
function autocreate(){
//创建table表格
var table=document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("background","red");
//获取行数值
var line=document.getElementById("line").value;
//获取列数值
var list=document.getElementById("list").value;
for(var i=1;i<=line;i++){
//alert(line);
//创建tr
var tr=document.createElement("tr");
for(var j=1;j<=list;j++){
//alert(list);
//创建td
var td=document.createElement("td");
td.innerHTML=i*j;
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("d1").appendChild(table);
}
需要准备的材料分别是:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、以一个2行1列的表格为例,在index.html的<script>标签中,输入以下js代码:
var table = window.document.createElement("table");
for(var i=0;i<2;i++) {
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode("hello");
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
}
table.setAttribute("border", 2);
document.body.appendChild(table);
3、浏览器运行index.html页面,会打印出一个2行1列的表格。
需要准备的材料分别是:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、一个2行1列的表格为例,在index.html的<script>标签中,输入js代码:
var table = window.document.createElement("table");
for(var i=0; i<2; i++) {
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode("hello");
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
}
table.setAttribute("border", 1);
document.body.appendChild(table);
3、浏览器运行index.html页面,此时会打印出一个2行1列的表格。