JavaScript动态创建table表格

2018-2-13 18:17| 作者: antzone| 查看: 605| 评论: 0|来自: 蚂蚁部落

在实际应用中,可能需要动态创建一个table表格以便应用。

下面就是一段能够实现此功能的代码实例,下面就分享一下此代码,并给出详细的注释。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<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 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);
}
window.onload=function(){
  createTable(10,10);
}
</script>
</head>
<body >
<div id="body"></div>
</body>
</html>

上面的代码实现了动态创建效果,下面介绍一下它的实现过程。

一.代码注释:

(1).function createTable(rows,lines){},此函数实现了创建功能,函数的参数表示创建表格的行数和列数。

(2).this.rows=rows,将行数赋值给this.rows,this的指向根据不同的使用会有所不同,具体可以参阅相关阅读。

(3).this.lines=lines,将列数赋值给this.lines。

(4).var Body=document.getElementById('body'),获取id属性值为body的元素对象。

(5).var Table=document.createElement('table'),创建一个table对象。

(6).Table.setAttribute('border','1'),设置table的border属性值。

(7).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);

},通过for循环的方式创建tr元素和td元素,然后对td元素进行赋值操作。


(8).Body.appendChild(Table),追加创建的表格对象。

(9).window.onload=function(){

  createTable(10,10);

},创建一个10行10列的表格。

二.相关阅读:

(1).document.createElement()参阅js createElement()一章节。

(2).setAttribute()参阅javascript setAttribute()一章节。

(3).rows属性参阅js rows一章节。

(4).document.createTextNode()参阅document.createTextNode()一章节。

(5).this的用法参阅javascript this一章节。

(6).严格模式对this的影响参阅严格模式下对于this指向的影响一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部