DOM操作表格(第十课)

来源：互联网发布：akb48少女时代知乎编辑：程序博客网时间：2024/05/01 10:01
window.onload=function(){//利用dom创建一个表格,这样效率不高/*var table = document.createElement("table");table.setAttribute("width",200);//给table元素添加属性document.body.appendChild(table);var caption = document.createElement('caption');caption.innerHTML='人员表';table.appendChild(caption);var thead = document.createElement('thead');table.appendChild(thead);var tr = document.createElement('tr');thead.appendChild(tr);var th = document.createElement('th');th.innerHTML='姓名';tr.appendChild(th);var th1 = document.createElement('th');th1.innerHTML='性别';tr.appendChild(th1);var th2 = document.createElement('th');th2.innerHTML='年龄';tr.appendChild(th2);*///html dom给我们table表格提供了专门的方法/*Table 对象集合集合 描述 IE F O W3C cells[] 返回包含表格中所有单元格的一个数组。 5 1 1 No rows[] 返回包含表格中所有行的一个数组。 4 1 9 Yes tBodies[] 返回包含表格中所有 tbody 的一个数组。 4     Yes */var tab = document.createElement("table");//alert(tab.rows.length);//返回包含表格中所有行的一个数组//alert(tab.rows[0].cells[0].innerHTML);//结果:名字//下面开始创建表格了/*Table 对象方法方法 描述 IE F O W3C createCaption() 为表格创建一个 caption 元素。 4 1 9 Yes createTFoot() 在表格中创建一个空的 tFoot 元素。 4 1 9 Yes createTHead() 在表格中创建一个空的 tHead 元素。 4 1 9 Yes deleteCaption() 从表格删除 caption 元素以及其内容。 4 1 9 Yes deleteRow() 从表格删除一行。 4 1 9 Yes deleteTFoot() 从表格删除 tFoot 元素及其内容。 4 1 9 Yes deleteTHead() 从表格删除 tHead 元素及其内容。 4 1 9 Yes insertRow() 在表格中插入一个新行。 4 1 9 Yes insertCell() 在一行中插入一个单元格*/tab.createCaption().innerHTML='人员表';var thead = tab.createTHead();var th = thead.insertRow(0);//新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。th.insertCell(0).innerHTML='姓名';th.insertCell(1).innerHTML='性别';th.insertCell(2).innerHTML='年龄';thead.appendChild(th);document.body.appendChild(tab);}</script></head><body><table width="587" height="323" border="1" style="text-align:center;"><caption>人员表</caption><!--表格的标题-->  <thead><!--表格的标题-->  <tr>    <th>名字</th>    <th>性别</th>    <th>年龄</th>  </tr>  </thead>  <tbody><!--表格的主题-->  <tr>    <td>张三;</td>    <td>女</td>    <td>25</td>  </tr>  </tbody>  <tbody>  <tr>    <td>李四</td>    <td>男</td>    <td>15</td>  </tr>  </tbody>  <tfoot><!--表格的页脚-->    <tr>    <td colspan="3">合计2人</td>  </tr>  </tfoot></table></body>