javascript動態建立指定行與列table表格程式碼例項

admin發表於2017-04-15
JavaScript

分享一段程式碼例項，它實現了動態建立指定數量行列table表格效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{
  width:300px;
  height:100px;
  border:#0C9 1px solid;
  border-collapse:collapse;
}
#d1{
  height:400px; 
  width:300px;
  padding:10px;
}
</style>
<script type="text/javascript">
function autocreate(){
  var table=document.createElement("table");
  table.setAttribute("border","1");
   
  var line=document.getElementById("line").value;
  var list=document.getElementById("list").value;
  for(var index=0;index<line;index++){
    var tr=document.createElement("tr");
    for(var j=0;j<list;j++){
      var td=document.createElement("td");
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.getElementById("d1").appendChild(table);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    autocreate();
  }
}
</script>
</head>
<body>
<input type="text" id="line">行數
<input type="text" id="list">列數
<input type="button" id="bt" value="建立表格">
<div id="d1"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function autocreate(){}，此方法實現了動態建立行列表格效果。

（2）.var table=document.createElement("table")，建立一個table表格元素物件。

（3）.table.setAttribute("border","1")，設定邊框為1px。

（4）.var line=document.getElementById("line").value，獲取行數。

（5）.var list=document.getElementById("list").value，獲取列數。

（6）.for(var index=0;index<line;index++)，通過for迴圈建立指定數目的行。

（7）.var tr=document.createElement("tr")，建立tr行元素物件。

（8）.for(var j=0;j<list;j++)，通過for迴圈建立指定數目的td單元格。

（9）.var td=document.createElement("td")，建立td單元格。

（10）.tr.appendChild(td)，將td新增到tr行。

（11）.table.appendChild(tr)，將tr行新增到table表格。

二.相關閱讀:

（1）.document.createElement()可以參閱document.createElement()一章節。

（2）.setAttribute()可以參閱setAttribute()一章節。

（3）.appendChild()可以參閱appendChild()一章節。

相關文章