JS-006-表格元素操作

直接上菜咯。。。

以下为 HTML 表格源码：

  1 <html>
  2     <head>
  3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4 
  5         <title>JS-006-表格元素操作</title>
  6         <script type="text/javascript" src="common.js"></script>
  7         <script type="text/javascript" src="test.js"></script>
  8 
  9         <link rel="stylesheet" type="text/css" href="global.css">
 10     </head>
 11         
 12     <body>
 13         <div>
 14             <h4>表格操作</h4>
 15             
 16             <ul>
 17                 <li>获取表格的行数：document.getElementById("study").children[0].rows.length</li>
 18                 <li>获取表格的列数：document.getElementById("study").children[0].rows[row].cells.length</li>
 19                 <li>获取单元格的值：cell.innerHTML</li>
 20                 <li>备注：当表格中存在单元格合并的情况下，表格的行列数会相对应减少，顺序：从上到下，从左到右</li>
 21                 <li>&nbsp;&nbsp;&nbsp;行内合并：被合并的列对应的原值将不存在</li>
 22                 <li>&nbsp;&nbsp;&nbsp;列内合并：被合并的行对应的原值将不存在</li>
 23             </ul>
 24             
 25             <table id="study" width="400" border="1">
 26                 <tr>
 27                     <th></th>
 28                     <th>周一</th>
 29                     <th>周二</th>
 30                     <th>周三</th>
 31                     <th>周四</th>
 32                     <th>周五</th>
 33                     <th>周六</th>
 34                     <th>周日</th>
 35                 </tr>
 36                 <tr>
 37                     <th>第一节</th>
 38                     <td>政治<span sytle="color:red">test</span></td>
 39                     <td>物理</td>
 40                     <td>化学</td>
 41                     <td>数学</td>
 42                     <td>体育</td>
 43                     <td>游泳</td>
 44                     <td>钢琴</td>
 45                 </tr>
 46                 <tr>
 47                     <th>第二节</th>
 48                     <td>外语</td>
 49                     <td>艺术</td>
 50                     <td>高数</td>
 51                     <td>线代</td>
 52                     <td>马哲</td>
 53                     <td rowspan="3">拓展</td>
 54                     <td>爬山</td>
 55                 </tr>
 56                 <tr>
 57                     <th>第三节</th>
 58                     <td>厚黑</td>
 59                     <td>财会</td>
 60                     <td>音乐</td>
 61                     <td>美术</td>
 62                     <td>武术</td>
 63                     
 64                     <td>攀岩</td>
 65                 </tr>
 66                 <tr>
 67                     <th>第四节</th>
 68                     <td>长安</td>
 69                     <td>宝马</td>
 70                     <td>法拉利</td>
 71                     <td>劳斯莱斯</td>
 72                     <td>悍马</td>
 73                     
 74                     <td>蹦极</td>
 75                 </tr>
 76                 <tr>
 77                     <th>第五节</th>
 78                     <td>百达翡丽</td>
 79                     <td>江诗丹顿</td>
 80                     <td>宝玑</td>
 81                     <td>浪琴</td>
 82                     <td>伯爵</td>
 83                     <td colspan="2">CS75</td>
 84                     
 85                 </tr>
 86                 <tr>
 87                     <th>第六节</th>
 88                     <td>selenium</td>
 89                     <td>python</td>
 90                     <td>java</td>
 91                     <td>TestNG</td>
 92                     <td>maven</td>
 93                     <td>jekins</td>
 94                     <td>fitness</td>
 95                 </tr>
 96                 <tr>
 97                     <th>第七节</th>
 98                     <td>HTML</td>
 99                     <td>PHP</td>
100                     <td>JavaScript</td>
101                     <td></td>
102                     <td>XML</td>
103                     <td></td>
104                     <td></td>
105                 </tr>
106                 <tr>
107                     <th>第八节</th>
108                     <td>Excel</td>
109                     <td></td>
110                     <td>CSV</td>
111                     <td>properties</td>
112                     <td>md</td>
113                     <td></td>
114                     <td></td>
115                 </tr>
116             </table>
117 
118             <input class="table" id="row" type="text"><input class="table" id="col" type="text">
119             <input id="get_table_text" type="button" value="取值" onclick="get_table_text();"><input id="t_text" type="text">
120             <input id="get_table_text" type="button" value="改变单元格样式" onclick="change_table_css();">
121         </div>
122             
123         <div>
124             <br><br><br><br>
125             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
126         </div>
127     </body>
128 </html>

以下为 HTML 源码调用 js 函数 get_table_text() 的源码：

以下为 HTML 源码调用 js 函数 change_table_css() 的源码：

以下为具体的页面展现，及获取单元格值的 js 展示：

 

至此， JS-006-表格元素操作 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

 

posted @ 2015-07-15 01:03  范丰平  Views(325)  Comments(0)  Edit  收藏  举报