javascript 動(dòng)態(tài)創(chuàng)建表格的2種方法總結(jié)
更新時(shí)間:2015年03月04日 09:40:50 投稿:hebedich
本文給大家總結(jié)了2種使用javascript動(dòng)態(tài)創(chuàng)建表格的方法,非常簡(jiǎn)單實(shí)用,小伙伴們自己對(duì)比下看看哪種更適合你呢,一般本人是使用第一種的。
第一種方法:
復(fù)制代碼 代碼如下:
<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標(biāo)簽元素
Table.setAttribute('border','1');
//給table標(biāo)簽添加其他屬性
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>
第二種方法:
復(fù)制代碼 代碼如下:
<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種方法小伙伴們是否都了解了呢,如有更好的方法,也請(qǐng)大家留言說(shuō)明下,大家共同進(jìn)步。
您可能感興趣的文章:
- 一組JS創(chuàng)建和操作表格的函數(shù)集合
- JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
- javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
- JS創(chuàng)建自定義表格具體實(shí)現(xiàn)
- javascript 動(dòng)態(tài)創(chuàng)建表格
- javascript動(dòng)態(tài)創(chuàng)建表格及添加數(shù)據(jù)實(shí)例詳解
- Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
- JavaScript如何動(dòng)態(tài)創(chuàng)建table表格
- 基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)
- JS封裝的自動(dòng)創(chuàng)建表格的實(shí)現(xiàn)代碼
相關(guān)文章
Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實(shí)例分析)
以下是對(duì)confirm的用法進(jìn)行了分析介紹,需要的朋友可以參考下2013-07-07完美實(shí)現(xiàn)bootstrap分頁(yè)查詢(xún)
這篇文章主要介紹了一個(gè)完美的bootstrap分頁(yè)查詢(xún),如何利用bootstrap實(shí)現(xiàn)分頁(yè)查詢(xún),本文將為大家進(jìn)行揭曉2015-12-12Three.Js實(shí)現(xiàn)看房自由小項(xiàng)目
目前隨著元宇宙概念的爆火,THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個(gè)平臺(tái),今天我們主要基于THREE實(shí)現(xiàn)一個(gè)三維的VR看房小項(xiàng)目,感興趣的朋友跟隨小編一起看看吧2022-10-10