HTML DOM Table 对象

Table 对象集合

集合 描述
cells[] 返回包含表格中所有单元格的一个数组。
rows[] 返回包含表格中所有行的一个数组。
tBodies[] 返回包含表格中所有 tbody 的一个数组。
<body>

  <table width="500" border="1" id="tab">

     <tr>

        <td>我是单元格1</td><td>我是单元格2</td><td>我是单元格3</td>

     </tr>

     <tr>

        <td>我是单元格4</td><td>我是单元格5</td><td>我是单元格6</td>

     </tr>

       <tr>

        <td>我是单元格7</td><td>我是单元格8</td><td>我是单元格9</td>

     </tr>

  </table>

  <script>

   //获取table对象引用

    var tab = document.getElementById('tab');

    //获取表格行数

    var rows = tab.rows.length;

    var cells;

    

    for(var i=0; i<rows; i++){

        //获取当前行的单元格数

        cells = tab.rows[i].cells.length;

        for(var j=0; j<cells; j++){

            //更新指定单元格中的数据

            tab.rows[i].cells[j].innerHTML +=" " +i+"*"+j;

        }

    }

  </script>

</body>

 表格table、行rows、单元格cells

tr和td对象的创建

<script>

   var tab = document.createElement("table");

   tab.width = 500;

   tab.border = 1;

   tab.id = "tab";

   

   var row,cell;

   for(var i=0; i<3; i++){

	 //为表插入行

	 row = tab.insertRow(-1);

	 for(var j=0; j<3; j++){

		 //为行插入单元格

		 cell = row.insertCell(-1);

		 cell.innerHTML = "我是单元格"+i+"*"+j;

	 }

   }

   

   //插入DOM树中

   document.body.appendChild(tab);

  

你可能感兴趣的:(table)