JavaScript动态生成制定行数，列数，并制定表头的表格

最新推荐文章于 2023-04-11 14:46:29 发布

最新推荐文章于 2023-04-11 14:46:29 发布 · 311 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态创建HTML表格的方法，可以根据指定的行数、列数及表头内容生成表格。通过简单的函数调用即可实现不同尺寸的表格创建，并能够设定各列的宽度。

JavaScript动态生成制定行数，列数，并制定表头的表格

<html>
<head>
<script language="javascript">
var table_head = new Array("用户名","MAC地址","用户类型");
var col_width = new Array("50px","80px","100px");
function create_table( row_num,table_head,col_width)
{

var oTable = document.createElement("table");
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");

//create the first row
oTable.insertRow(0);
for(var j=0;j<table_head.length;j++)
{
oTable.rows[0].insertCell(j);
oTable.rows[0].cells[j].appendChild(document.createTextNode(table_head[j]));
}

for( var i=1 ;i <= row_num ; i++)
{
oTable.insertRow(i);
for( var m = 0; m < table_head.length;m++)
{
oTable.rows[i].insertCell(m);
oTable.rows[i].cells[m].appendChild(document.createTextNode(" "));
oTable.rows[i].cells[m].setAttribute("height","20px");
oTable.rows[i].cells[m].setAttribute("width",col_width[m]);
}
}
var div_id = document.getElementById("my_div");
div_id.appendChild(oTable);
}
</script>

</head>
<body onload= "create_table(16,table_head,col_width)">
<div id = "my_div" style ="width:auto; height:auto;" >

</div>
</body>
</html>