首页 > 编程语言 >JavaScript动态生成制定行数,列数,并制定表头的表格

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

时间:2022-11-28 18:01:49浏览次数:37  
标签:oTable JavaScript 表头 width rows 列数 var table document


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 οnlοad= "create_table(16,table_head,col_width)">
<div id = "my_div" style ="width:auto; height:auto;" ></div>
</body>
</html>

标签:oTable,JavaScript,表头,width,rows,列数,var,table,document
From: https://blog.51cto.com/javaalpha/5893244

相关文章

  • javascript常用技巧
    javascript常用技巧事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件......
  • colResizable表格列可拖动,表头不能固顶
    <styletype="text/css">#colRTab{width:100%;border-collapse:collapse;table-layout:fixed;}#colRTabtd{borde......
  • 【Web技术】188-[译] 现代 JavaScript 与 CSS 滚动实现指南
    编者按:本文由sea_ljf翻译并发表于众成翻译平台,原标题“滑向未来(现代JavaScript与CSS滚动实现指南)”一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为......
  • 【正则】174-《JavaScript 正则迷你书》知识点小抄本(下)
    四、正则表达式回溯法原理概念理解起来比较容易。比如用 ​​​/ab{1,3}c/​​ 去匹配下面两个字符串。当匹配 ​​abbbc​​,按顺序匹配,到了第3个 ​​b​​ 后,直接......
  • 【JS】165-JavaScript设计模式——工厂模式
    二、工厂模式(FactoryPattern)1.概念介绍工厂模式的目的在于创建对象,实现下列目标:可重复执行,来创建相似对象;当编译时位置具体类型(类)时,为调用者提供一种创建对象的接口;通过......
  • 【JS】164-JavaScript设计模式——单体模式
    一、单体模式(SingletonPattern)1.概念介绍单体模式(SingletonPattern)的思想在于保证一个特定类仅有一个实例,即不管使用这个类创建多少个新对象,都会得到与第一次创建的对......
  • 12个有用的JavaScript数组技巧
    数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的。1、数组去重1、from()叠加newSet()方法字符串或数值型数......
  • 运行 JavaScript 代码片段
    原文链接​​RunsnippetsofJavaScript​​--作者​​KayceBasques​​&​​SofiaEmelianova​​如果你发现自己反复使用​​Console​​来运行同一份代码,那么......
  • 拓端tecdat|R语言代写对用电负荷时间序列数据进行K-medoids聚类建模和GAM回归
     通过对用电负荷的消费者进行聚类,我们可以提取典型的负荷曲线,提高后续用电量预测的准确性,检测异常或监控整个智能电网(Laurinec等人(2016),Laurinec和Lucká(2016))。第一个用例......
  • javaScriptna那些事儿
    javaScriptna那些事儿作用域JS的作用域简单来说就是变量(变量作用于又称上下文)和函数生效(能被访问)的区域###1.全局作用域函数之外声明的变量,会成为全局变量。变量......