欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實例分析)

    Js(JavaScript)中,彈出是或否的選擇框示例(confirm用法的實例分析)

    以下是對confirm的用法進行了分析介紹,需要的朋友可以參考下
    2013-07-07
  • 完美實現bootstrap分頁查詢

    完美實現bootstrap分頁查詢

    這篇文章主要介紹了一個完美的bootstrap分頁查詢,如何利用bootstrap實現分頁查詢,本文將為大家進行揭曉
    2015-12-12
  • 淺談javascript中自定義模版

    淺談javascript中自定義模版

    本文向我們簡單介紹了javascript中自定義模板的2種方法,圖文并茂,十分詳細,這里推薦給小伙伴們。
    2015-01-01
  • JavaScript WeakMap使用詳解

    JavaScript WeakMap使用詳解

    這篇文章主要介紹了JavaScript WeakMap使用的詳細介紹,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2021-02-02
  • 淺析我對JS延遲異步腳本的思考

    淺析我對JS延遲異步腳本的思考

    這篇文章主要介紹了淺析我對JS延遲異步腳本的思考,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-10-10
  • JS刪除某個父元素下的所有子元素

    JS刪除某個父元素下的所有子元素

    JS中如何刪除某個父元素下的所有子元素?這里我介紹幾種方法,結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • 微信小程序模板之分頁滑動欄

    微信小程序模板之分頁滑動欄

    這篇文章主要為大家詳細介紹了微信小程序模板之分頁滑動欄的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • 微信小程序wx.request攔截器使用詳解

    微信小程序wx.request攔截器使用詳解

    這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • Three.Js實現看房自由小項目

    Three.Js實現看房自由小項目

    目前隨著元宇宙概念的爆火,THREE技術已經深入到了物聯網、VR、游戲、數據可視化等多個平臺,今天我們主要基于THREE實現一個三維的VR看房小項目,感興趣的朋友跟隨小編一起看看吧
    2022-10-10
  • 微信小程序自定義導航欄(模板化)

    微信小程序自定義導航欄(模板化)

    這篇文章主要為大家詳細介紹了微信小程序自定義導航欄(模板化),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11

最新評論