JavaScript 動態建立table表格

antzone發表於2018-02-13
JavaScript

在實際應用中，可能需要動態建立一個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屬性參閱JavaScript rows一章節。

（4）.document.createTextNode()參閱document.createTextNode()一章節。

（5）.this的用法參閱JavaScript this一章節。

相關文章