javascript動態建立table表格程式碼示例

antzone發表於2017-03-22
JavaScript

在實際編寫程式碼過程中，可能需要動態建立表格。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#theid{
  height:100px;
  border:1px solid #ccc;
  border-collapse:collapse;
}
#theid td{
  border:1px solid #ccc;
  padding:5px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    var otable=document.createElement("table");
    otable.style.width="200px";
    otable.style.textAlign="center";
    otable.id="theid";
         
    var otr=document.createElement("tr");
    var otd=document.createElement("td");
    var otext=document.createTextNode("螞蟻部落")
    otd.appendChild(otext);
    otr.appendChild(otd);
    otr.appendChild(otd.cloneNode());
    otable.appendChild(otr);
    otable.appendChild(otr.cloneNode());
    document.body.appendChild(otable);
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="建立表格"/>
</body>
</html>

以上程式碼實現了我們的要求，可以建立一個表格，程式碼比較簡單，這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.document.createElement()函式可以參閱js createElement()一章節。 

2.document.createTextNode()函式可以參閱javascript如何建立一個文字節點一章節。

3.cloneNode()函式可以參閱原生javascript實現的節點複製cloneNode()函式用法一章節。

相關文章