javascript 动态创建表格的2种方法总结_Javascript教程-查字典教程网
javascript 动态创建表格的2种方法总结
javascript 动态创建表格的2种方法总结
发布时间:2016-12-30 来源:查字典编辑
摘要:第一种方法:复制代码代码如下: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教程学习
    热门Javascript教程学习
    编程开发子分类