zoukankan      html  css  js  c++  java
  • Java Script基础(七) HTML DOM模型

    一、HTML DOM。

      HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个及其元素的属性和方法。

      HTML DOM参考手册

      下面以Table为例来讲解HTML DOM动态操作表格。

      1、Table对象(表格)

      在HTML DOM中, table对象代表一个HTML表格,TableRow对象代表HTML表格的行,tableCell对象代表HTML表格的单元格。在HTML中可以通过Table、TableRow和TableCell来创建HTML表格。

      属性:

      rows[]:获取表格中的所有行。

      cellls[]:获取表格中的所有单元格。

      方法:

      inertRow(index):用于在表格的指定位置插入一个新行。

      deleteRow(index):用于从表格中删除指定位置的行。

      2、TableRow对象(行)

      属性:

      cells[]:返回当前行中的所有单元格。

      rowIndex:返回当前行的下标。

      方法:

      insertCell(index):在一行中的指定位置插入单元格。

      deleteCell(index):删除一行中指定位置的单元格。

      3、TableCell对象(单元格)

      属性:

      cellIndex:返回当前单元格所在的下标

      innerHTML:返回当前单元格中的HTML标记。

      align:设置单元格的水平对齐方式。

      className:设置单元格的class属性。

      示例:

      动态生成单元格的行,并为单元格赋值。

    复制代码
    <html>
    <head>
    <script type="text/javascript">
    function insRow()
      {
      var x=document.getElementById('myTable').insertRow(0)
      var y=x.insertCell(0)
      var z=x.insertCell(1)
      y.innerHTML="NEW CELL1"
      z.innerHTML="NEW CELL2"
      }
    </script>
    </head>
    
    <body>
    <table id="myTable" border="1">
    <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    </tr>
    <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    </tr>
    <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="insRow()" value="插入行">
    
    </body>
    </html>
    复制代码
  • 相关阅读:
    SpringIOC的小例子
    java中递归实现复制多级文件夹
    快速排序和几种简单排序
    Oracle面试的基本题
    多态的两个小例子
    单例模式
    内部类与匿名内部类
    C#
    C#
    C#
  • 原文地址:https://www.cnblogs.com/futao123/p/5068673.html
Copyright © 2011-2022 走看看