`
phoebird
  • 浏览: 113614 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JavaScript高级程序设计 学习笔记之DOM基础(四)

    博客分类：
  • web
JavaScriptJSPHTML 
阅读更多

7、使用核心DOM方法创建表格

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <script type="text/javascript">

            function createTable(){

                var oTable=document.createElement("table");//创建表格元素

                oTable.setAttribute("border", "1");//设置border属性为1

                oTable.setAttribute("width", "100%");//设置width属性为100%

 

                var oTBody=document.createElement("tbody"); //创建tbody元素

                oTable.appendChild(oTBody);//添加tbody到oTable中

 

                var oTr1=document.createElement("tr");

                oTBody.appendChild(oTr1);

                var oTD11=document.createElement("td");

                oTD11.appendChild(document.createTextNode("一行一列"));

                oTr1.appendChild(oTD11);

                var oTD12=document.createElement("td");

                oTD12.appendChild(document.createTextNode("一行二列"));

                oTr1.appendChild(oTD12);

 

                var oTr2=document.createElement("tr");

                oTBody.appendChild(oTr2);

                var oTD21=document.createElement("td");

                oTD21.appendChild(document.createTextNode("二行一列"));

                oTr2.appendChild(oTD21);

                var oTD22=document.createElement("td");

                oTD22.appendChild(document.createTextNode("二行二列"));

                oTr2.appendChild(oTD22);

 

                document.body.appendChild(oTable);//将表格添加到body中显示

 

            }

        </script>

    </head>

    <body  onload="createTable()">

    </body>

</html>

显示效果如下：

采用HTML DOM创建表格，运用一些特性和方法：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <script type="text/javascript">

            function createTable(){

                var oTable=document.createElement("table");//创建表格元素

                oTable.setAttribute("border", "1");//设置border属性为1

                oTable.setAttribute("width", "100%");//设置width属性为100%

 

                var oTBody=document.createElement("tbody"); //创建tbody元素

                oTable.appendChild(oTBody);//添加tbody到oTable中

                //创建第一行

                oTBody.insertRow(0);//插入一个新行，为第一行

                oTBody.rows[0].insertCell(0);//在该新行上插入第一个单元格

                oTBody.rows[0].cells[0].appendChild(document.createTextNode("第一行第一列"));//在第一个单元格里添加文本内容

                oTBody.rows[0].insertCell(1);//在该行上插入第二个单元格

                oTBody.rows[0].cells[1].appendChild(document.createTextNode("第一行第二列"));//第二个单元格里添加文本

                //创建第二行

                oTBody.insertRow(1);//插入第二行

                oTBody.rows[1].insertCell(0);//插入第二行第一个单元格

                oTBody.rows[1].cells[0].appendChild(document.createTextNode("第二行第一列"));//添加文本到第一个单元格

                oTBody.rows[1].insertCell(1);//插入第二行第二个单元格

                oTBody.rows[1].cells[1].appendChild(document.createTextNode("第二行第二列"));//添加文本到第二个单元格

                document.body.appendChild(oTable);//将表格添加到body中显示

          

            }

        </script>

    </head>

    <body  onload="createTable()">

    </body>

</html>

 

 

 

  • 大小: 8.6 KB
分享到：
| JavaScript高级程序设计 学习笔记之DOM基 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics