javascript 動態(tài)創(chuàng)建表格的2種方法總結
更新時間:2015年03月04日 09:40:50 投稿:hebedich
本文給大家總結了2種使用javascript動態(tài)創(chuàng)建表格的方法,非常簡單實用,小伙伴們自己對比下看看哪種更適合你呢,一般本人是使用第一種的。
第一種方法:
復制代碼 代碼如下:
<html>
<head>
<script>
function createTable(rows,lines){
this.rows=rows;
this.lines=lines;
var Body=document.getElementById('body');
var Table=document.createElement('table');//創(chuàng)建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種方法小伙伴們是否都了解了呢,如有更好的方法,也請大家留言說明下,大家共同進步。
您可能感興趣的文章:
- 一組JS創(chuàng)建和操作表格的函數集合
- JavaScript與DOM組合動態(tài)創(chuàng)建表格實例
- javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
- JS創(chuàng)建自定義表格具體實現
- javascript 動態(tài)創(chuàng)建表格
- javascript動態(tài)創(chuàng)建表格及添加數據實例詳解
- Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
- JavaScript如何動態(tài)創(chuàng)建table表格
- 基于JavaScript實現動態(tài)創(chuàng)建表格和增加表格行數
- JS封裝的自動創(chuàng)建表格的實現代碼
相關文章
Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實例分析)
以下是對confirm的用法進行了分析介紹,需要的朋友可以參考下2013-07-07