手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript 动态创建表格的2种方法总结
javascript 动态创建表格的2种方法总结
摘要:第一种方法:复制代码代码如下:functioncreateTable(rows,lines){this.rows=rows;this.lin...

第一种方法:

复制代码 代码如下:

<html>

<head>

<script>

function createTable(rows,lines){

this.rows=rows;

this.lines=lines;

var Body=document.getElementById('body');

var Table=document.createElement('table');//创建table标签元素

Table.setAttribute('border','1');

//给table标签添加其他属性

for(var i=0;i<this.rows;i++){

var lRow=document.createElement('tr');

for(var j=0;j<this.lines;j++){

var textNode=document.createTextNode(i+','+j);

var lLine=document.createElement('td');

lLine.appendChild(textNode);

lRow.appendChild(lLine);

}

Table.appendChild(lRow);

}

Body.appendChild(Table);

}

</script>

</head>

<body >

<div id="body"></div>

</body>

<script type="text/javascript">

createTable(10,10);

</script>

</html>

第二种方法:

复制代码 代码如下:

<script>

function createTable(rows,lines){

this.rows=rows;

this.lines=lines;

var Body=document.getElementById('body');

var Table=document.createElement('table');

Table.setAttribute('border',1);

for(var i=0;i<this.rows;i++){

var row=Table.insertRow(i);

for(var j=0;j<this.lines;j++){

var cells=row.insertCell(j);

cells.innerHTML=i+','+j

}

}

Body.appendChild(Table);

}

</script>

以上2种方法小伙伴们是否都了解了呢,如有更好的方法,也请大家留言说明下,大家共同进步。

【javascript 动态创建表格的2种方法总结】相关文章:

Javascript动态创建表格及删除行列的方法

javascript鼠标滑动评分控件完整

动态加载jQuery的方法

JavaScript中的unshift()方法的使用

JavaScript深度复制(deep clone)的实现方法

javascript验证邮件地址和MX记录的方法

javascript实现可全选、反选及删除表格的方法

javascript动态创建链接的方法

JavaScript的正则表达式中test()方法的使用

Javascript生成全局唯一标识符(GUID,UUID)的方法

精品推荐
分类导航