JavaScript7-1 表格与表单

第7章 表格与表单

7.1 用CSS控制表格样式

7.2 用DOM动态控制表格(添加、删除表格的行、列、单元格)

7.2.1 动态添加表格 --主要采用的是insertRow()和insertCell()

7.2.2 修改单元格内容

oTable.rows[i].cells[j] 找到单元格 --->innerHTML 属性修改相应的内容。

var oTable = document.getElementById("member");  //找到表格 另外添加完一个单元格之后，亦需要用到此方法修改 新添加单元格的内容。

oTable.rows[3].cells[4].innerHTML = "lost";

7.3 动态删除表格

var oTable = document.getElementById("member");

oTable.deleteRow(2);   //删除一行，后面的行号自动补齐。

oTable.rows[2].deleteCell(1);    //删除一个单元格，后面的也自动补齐。

 

实例：自动添加表行

<html>
<head>
<style type = css/text>
body{
       background-color:#ebf5ff;
       margin:0px;padding:4px;
       text-align:center;
}
.datalist{
       color:#0046a6;
       background-color:#d2e8ff;
       font-family:Arial;
}
.datalist caption{
       font-size:1px;
       font-weight:bold
}
.datalist th{
       color:#003e7e;
       background-color:#7bb3ff
}
</style>
<script language = "javascript">
window.onload = function(){
    var oTr = document.getElementById("member").insertRow(2);
    var aText = new Array();
    aText[0] = document.createTextNode("¹¤×Ê");
    aText[1] = document.createTextNode("11,264");
    aText[2] = document.createTextNode("34,235");
    aText[3] = document.createTextNode("69,378");
    aText[4] = document.createTextNode("86,264");
    for(var i = 0; i<aText.length; i++
    {
       oTr.insertCell(i).appendChild(aText[i]);
    }
    alert("where error");
}
</script>
</head>
<body>
<table  class = "datalist"  summary = "This table shows the yearly income for years 2005 througth2008"border = "1">
<caption>财政报表2005-2008</caption>
<tbody>
<tr>
   <th></th>
   <th srcope = "col">2005</th>
   <th scrope = "col">2006</th>
   <th scrope = "col">2007</th>
   <th scrope = "col">2008</th>
</tr>
<tr>
   <th scrope = "row">拨款</th>
   <td>11,980</td>
   <td>12,650</td>
   <td>9,700</td>
   <td>10,600</td>
</tr>
<tr>
   <th scrope = "row">捐款</th>
   <td>4,780</td>
   <td>4,989</td>
   <td>6,700</td>
   <td>6,590</td>
</tr>
<tr>
   <th scrope = "row">投资</th>
   <td>8,000</td>
   <td>8,100</td>
   <td>8,760</td>
   <td>8,490</td>
</tr>
<tr>
   <th scrope = "row">募捐</th>
   <td>11,980</td>
   <td>12,650</td>
   <td>9,700</td>
   <td>10,600</td>
</tr>
<tr>
   <th scrope = "row">销售</th>
   <td>28,980</td>
   <td>27,650</td>
   <td>27,700</td>
   <td>29,600</td>
</tr>
<tr>
   <th scrope = "row">杂费</th>
   <td>2,980</td>
   <td>1,650</td>
   <td>1,300</td>
   <td>1,760</td>
</tr>
<tr>
   <th scrope = "row">总计</th>
   <td>58,460</td>
   <td>57,859</td>
   <td>58,110</td>
   <td>60,700</td>
</tr>
</tbody>
</table>
</body>
</html>

 

 

posted @ 2012-05-28 08:53  巴拉库  阅读(198)  评论(0)  编辑  收藏  举报